图片的预加载和按需加载

时间：2015-05-02 06:12:51 阅读：198 评论：0 收藏：0 [点我收藏+]

标签：

图片预加载

<!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>

图片的预加载和按需加载

标签：

原文地址：http://www.cnblogs.com/liujin0505/p/4471484.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行