图片的预加载和按需加载

最新推荐文章于 2022-05-15 16:55:06 发布

chengweng2602

最新推荐文章于 2022-05-15 16:55:06 发布

阅读量128

点赞数

原文链接：https://my.oschina.net/u/3147332/blog/807109

版权

图片预加载

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
    img{width:500px;margin:100px auto;display: block;}
</style>
<script>
window.onload = function() {
    var iCur = 0;
    var i = 0;
    var oImg = document.getElementById('img1');

    var arr = [
            [
                'http://b.hiphotos.baidu.com/image/pic/item/e4dde71190ef76c666af095f9e16fdfaaf516741.jpg',
                'http://g.hiphotos.baidu.com/image/pic/item/4a36acaf2edda3ccd2994a5402e93901213f9241.jpg',
                'http://a.hiphotos.baidu.com/image/pic/item/2fdda3cc7cd98d10b1a9fe45223fb80e7bec9041.jpg',
                'http://e.hiphotos.baidu.com/image/pic/item/96dda144ad34598216d017e60ff431adcbef8468.jpg',
                'http://d.hiphotos.baidu.com/image/pic/item/7c1ed21b0ef41bd5a6e81a8052da81cb39db3d0e.jpg',
                'http://b.hiphotos.baidu.com/image/pic/item/14ce36d3d539b600ab94fdc3ea50352ac65cb768.jpg',
                'http://c.hiphotos.baidu.com/image/pic/item/cf1b9d16fdfaaf5179eeb78f8f5494eef01f7af4.jpg',
                'http://d.hiphotos.baidu.com/image/pic/item/8cb1cb13495409234610554e9158d109b3de4980.jpg',
                'http://d.hiphotos.baidu.com/image/pic/item/5ab5c9ea15ce36d386b6b50039f33a87e950b14b.jpg',
                'http://b.hiphotos.baidu.com/image/w%3D230/sign=84a0b54d93ef76c6d0d2fc28ad17fdf6/fc1f4134970a304e4462c796d2c8a786c9175c1d.jpg'],[
                '01',
                '02',
                '03',
                '04',
                '05',
                '06',
                '07',
                '08',
                '09',
                '10'
            ]
    ]
;
    
    

    oImg.onclick = function() {
        i++;
        if (i < arr[0].length) {
            oImg.src = arr[0][i];
        }
    }

    preLoadImg();
    function preLoadImg() {
        var oImage = new Image();
        oImage.src = arr[0][iCur];

        oImage.onload = oImage.onerror = function() {
            iCur++;
            if (iCur < arr[0].length) {
                preLoadImg();    //递归
            }
            document.title = iCur + ' / ' + arr[0].length;
        }
    }
    
}
</script>
</head>

<body>
    <img src="http://bizhi.zhuoku.com/2014/10/01/zhuoku/zhuoku001.jpg" alt="1111" id="img1"/>
</body>
</html>

图片按需加载

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#ul1 {margin: 100px auto 0; padding: 0;}
li {float: left; margin:0 0 10px 10px; list-style:none; border: 1px solid black;}
img {width: 290px; height: 200px; display: block;}
</style>
<script>
window.onload = function() {
    
    var oUl = document.getElementById('ul1');
    var aImg = oUl.getElementsByTagName('img');
    
    showImage();
    
    window.onscroll = showImage();
    
    function showImage() {
        
        var scrollTop  = document.documentElement.scrollTop || document.body.scrollTop;
        
        for (var i=0; i<aImg.length; i++) {
            
            if ( !aImg[i].isLoad && getTop(aImg[i]) < scrollTop + document.documentElement.clientHeight ) {
                //alert(i);
                aImg[i].src = aImg[i].getAttribute('_src');
                aImg[i].isLoad = true;
            }
            
        }
        
    }
    
    function getTop(obj) {
        var iTop = 0;
        while(obj) {
            iTop += obj.offsetTop;
            obj = obj.offsetParent;
        }
        return iTop;
    }
    
}
</script>
</head>

<body>
    <ul id="ul1">
        <li><img _src="img/1.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/2.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/3.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/4.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/5.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/6.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/7.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/1.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/2.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/3.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/4.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/5.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/6.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/7.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/1.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/2.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/3.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/4.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/5.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/6.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/7.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/1.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/2.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/3.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/4.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/5.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/6.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/7.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/1.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/2.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/3.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/4.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/5.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/6.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/7.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/1.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/2.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/3.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/4.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/5.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/6.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/7.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/1.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/2.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/3.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/4.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/5.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/6.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/7.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/1.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/2.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/3.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/4.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/5.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/6.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/7.jpg" src="img/white.JPG" /></li>
    </ul>
</body>
</html>

转载于:https://my.oschina.net/u/3147332/blog/807109

chengweng2602

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片的预加载和按需加载

图片预加载 <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title&g...
复制链接

扫一扫