图片懒加载实现

• 　　在现在很多网站上，在图片加载时均采用了懒加载的方式，当页面被请求时，只加载可视区域的图片，其它部分的图片则不加载
• 　　而当这些图片出现在可视区域时才会动态加载这些图片，从而提高了初次加载的速度，优化了网页性能

具体实现方法如下：

 HTML代码

/*现将src为空，自定义属性存放图片路径，图片进入可视区范围内时，动态将路径赋给src*/
<div id="div">
    <img src="" data-src="img/1.jpg">
    <img src="" data-src="img/2.jpg">
    <img src="" data-src="img/3.jpg">
    <img src="" data-src="img/4.jpg">
    <img src="" data-src="img/5.jpg">
</div>

css代码  这里只是简单的设置了一下样式

div{
       width:550px;
         height:420px;
            margin:20px auto;
        }
        img {
            display: block;
            width: 550px;
            height: 420px;
        }

 

javascript代码

window.onload=function(){
       lazy();
//网页加载时先默认加载当前可视区窗口的图片
    };
    document.onscroll =function(){
        lazy();
    };

    function lazy(){
        var aImg = document.querySelectorAll('img');
        var len = aImg.length;
        var n = 0;
    //存储图片加载到的位置，避免每次都从第一张图片开始遍历
            var seeHeight = document.documentElement.clientHeight; 
    // 网页可视区高度
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            //同时使用其中一个为0，另一个生效   兼容不同浏览器    滚轮滚一下100px
            for (var i = n; i < len; i++) {
                if (aImg[i].offsetTop <= seeHeight + scrollTop) {    //offsetTop 元素距离页面顶部的距离
                    if (aImg[i].getAttribute('src') == '') {
                        aImg[i].src = aImg[i].getAttribute('data-src');
                    }
                    n = i + 1;
                }
            }
        }