懒加载

问题

一个电商网站上有大量的图片，加载很慢，如何使用懒加载优化用户体验？

懒加载的原理：

先让所有的图片都显示同一张图片，在通过判断窗口大小以及滚动距离，判断该 DOM 元素是否在我们已视区域，如果在已视区域，则用 js 修改 img 标签的 src 为 data 中储存的真正的 src ,然后再添加一些图片出现的特效即可！

html 代码

<div class="lazyload">  <div>  <ul>    <li class="item">      <a href="javascript:void(0)"><img data-img="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher1.jpg" src="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher1.jpg"></a>    </li>    <li class="item">      <a href="javascript:void(0)"><img data-img="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher2.jpg" src="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher1.jpg"></a>    </li>    <li class="item">      <a href="javascript:void(0)"><img data-img="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher3.jpg" src="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher1.jpg"></a>    </li>    <li class="item">      <a href="javascript:void(0)"><img data-img="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher4.jpg" src="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher1.jpg"></a>    </li>    <li class="item">      <a href="javascript:void(0)"><img data-img="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher5.jpg" src="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher1.jpg"></a>    </li>    <li class="item">      <a href="javascript:void(0)"><img data-img="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher6.jpg" src="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher1.jpg"></a>    </li>    <li class="item">      <a href="javascript:void(0)"><img data-img="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher7.jpg" src="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher1.jpg"></a>    </li>    <li class="item">      <a href="javascript:void(0)"><img data-img="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher8.jpg" src="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher1.jpg"></a>    </li>    <li class="item">      <a href="javascript:void(0)"><img data-img="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher9.jpg" src="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher1.jpg"></a>    </li>  </ul>  </div></div>

其中 data-img 储存的是 img 的真正的 src。

CSS代码：

* {      padding: 0;      margin: 0;      text-decoration: none;      list-style: none;    }    .lazyload img {        width: 640px;      }      .lazyload{        width: 700px;        margin: 0 auto;        text-align: center;      }    @media screen and (max-width: 980px) {      .lazyload img {        width: 100%;        height: 480px;      }      .lazyload{        width: 100%;        margin: 0 auto;        text-align: center;      }    }

这里做了一些用户体验优化，当屏幕小于980px时，图片宽度100%，用到了媒体查询@media

JS 代码：

var lazyLoad = (function(){  var clock;  // 函数初始化，启动监听  function init(){      // 监听滚动    $(window).on("scroll", function(){      // 清楚定时器，当滚动时间位于 200ms 内时，减少不必要的遍历      if (clock) {        clearTimeout(clock);      }      // 滚动两百毫秒后遍历一次检查      clock = setTimeout(function(){        checkShow();      }, 200);    })     // 检查图片是否处于已视区域    checkShow();  }  // 检查图片是否处于已视区域  function checkShow(){    $(".lazyload img").each(function(){      var $cur =$(this);      // 给每个 img 增加一个 isLoaded 属性      // 如果 isLoaded 为 true ,则不用再次显示，return 回去      if($cur.attr('isLoaded')){            return;          }      // 如果 shouldShow($cur) 为 true,则表示该图片位于已视区域，且 isLoaded 属性还未存在      if(shouldShow($cur)){      // 展示该图片真正src        showImg($cur);      }    })  }  // $node 代表 this，表示 img 数组里面对应的每一个 img  function shouldShow($node){  // 获取距离窗口滚动距离，窗口高度，和图片距离文档顶部的距离    var scrollH = $(window).scrollTop(),      winH = $(window).height(),      top = $node.offset().top;   // 如果图片距离文档顶部的距离小于距离窗口滚动距离+窗口高度，那么处于已视区域，否则处于未视区域    if(top < winH + scrollH){        return true;      }else{        return false;      }  }  // 展示该图片真正src  function showImg($node){      // 先将图片隐藏      $node.hide()      // 设置该图片真正src      $node.attr('src', $node.attr('data-img'));      // 让图片淡入      $node.fadeIn()      // 设置 isLoaded 属性为 true      $node.attr('isLoaded', true);  }  // 返回 init 方法  return {    init: init  }})()// 调用lazyLoad.init()方法lazyLoad.init();

记得，本文基于JQ进行操作，记得引入JQ

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>

个人认为这是最简单理解懒加载的实例，项目DEMO请点击这里。

希望本文对你有用，喜欢就点个顶呗！(❤ ω ❤)