图片懒加载

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

具体实现方法如下：

1. HTML代码
   //现将src为空，自定义属性存放图片路径，图片进入可视区范围内时，动态将路径赋给sr
   <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>

2. css代码
   //这里只是简单的设置了一下样式，大家根据需要自行改进

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

3. 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;
                 }
             }
         }        

其他博客地址：http://www.cnblogs.com/Auyuer
欢迎大家指出问题