图片懒加载

图片懒加载

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

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

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.οnscrοll=function () {
        lazyload();
      }
    }
  })(window,document)