图片懒加载

图片懒加载

当网站的要显示的图片比较多的时候，要请求的次数比较多，会增加用户的等待时间，利用懒加载可以大大提高用户的体验。

懒加载思路：当图片出现的时候，加载图片。如果用户没有继续往下浏览，下面的图片就不加载。

html5定义的data-*属性允许我们在标签内来嵌入自定义数据，这样我们就可以将img的标签内的src里的图片地址放到data-xx里边存储。如果src为空的话，就不会被请求。当图片进入可视区域的时候，将data-xx里边的图片地址再赋值给该img标签的src就可以了。

例： 

<img src="" data-img="http://imgtu.5011.net/uploads/content/20170411/9651441491896247.jpg" alt="" >

js代码：

(function (window,document) {    window.onload = function () {      //可视窗口大小      var viewportHeightSize = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;      //获取所有的img标签      var imgs = document.getElementsByTagName('img');      function lazyload(){        //网页被卷上去的高        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;        for(var i=0; i<imgs.length; i++) {          var top =scrollTop+viewportHeightSize-imgs[i].offsetTop;          if(top > 0){            imgs[i].src = imgs[i].getAttribute('data-img');          }        }      }      //进入页面首先调用一次，否则一开始就在可视区域的图片就无法显示      lazyload();      //给window对象注册滚动监听事件      window.onscroll=function () {        lazyload();      }    }  })(window,document)