懒加载

问题

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

懒加载的原理：

先让所有的图片都显示同一张图片，在通过判断窗口大小以及滚动距离，判断该 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请点击这里。

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