图片懒加载实现

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

具体实现方法如下：

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代码这里只是简单的设置了一下样式

 1 div{
 2        width:550px;
 3          height:420px;
 4             margin:20px auto;
 5         }
 6         img {
 7             display: block;
 8             width: 550px;
 9             height: 420px;
10         }

javascript代码

 1 window.onload=function(){
 2        lazy();
 3 //网页加载时先默认加载当前可视区窗口的图片
 4     };
 5     document.onscroll =function(){
 6         lazy();
 7     };
 8 
 9     function lazy(){
10         var aImg = document.querySelectorAll('img');
11         var len = aImg.length;
12         var n = 0;
13     //存储图片加载到的位置，避免每次都从第一张图片开始遍历
14             var seeHeight = document.documentElement.clientHeight; 
15     // 网页可视区高度
16             var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
17             //同时使用其中一个为0，另一个生效   兼容不同浏览器    滚轮滚一下100px
18             for (var i = n; i < len; i++) {
19                 if (aImg[i].offsetTop <= seeHeight + scrollTop) {    //offsetTop 元素距离页面顶部的距离
20                     if (aImg[i].getAttribute('src') == '') {
21                         aImg[i].src = aImg[i].getAttribute('data-src');
22                     }
23                     n = i + 1;
24                 }
25             }
26         }

图片懒加载实现

推荐阅读