JS使用lazyload进行图片懒加载

原理：

图片的加载是由src引起的，当对src赋值时浏览器会请求图片资源，基于这个，可以利用html5的属性data-xxx来保存图片的路径，当我们需要加载图片的时候才将data-xxx的值赋予src。就能实现图片的按需加载了，也就是懒加载了

方法：

1.使用lazyload插件，引用jquery.js和jquery.lazyload.js
2.将img标签中的src属性赋值为加载图片，即一张临时的loading.gif图，将真正的图片路径放在data-original属性中
3.当JS监听到该图片元素进入可视窗口时，将data-original属性中的地址存赋予到src属性中，达到懒加载的效果

引用

  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
  <script src="https://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.js"></script>

//html
<div>
    <ul>
      <li><img data-original="https://xxxxxxcity.jpg" src="https://xxxxxxloading.gif" alt="" width="600px" height='480px'></li>
      <li><img data-original="https://xxxxxxcity.jpg" src="https://xxxxxxloading.gif" alt="" width="600px" height='480px'></li>
      <li><img data-original="https://xxxxxxcity.jpg" src="https://xxxxxxloading.gif" alt="" width="600px" height='480px'></li>
      <li><img data-original="https://xxxxxxcity.jpg" src="https://xxxxxxloading.gif" alt="" width="600px" height='480px'></li>
      <li><img data-original="https://xxxxxxcity.jpg" src="https://xxxxxxloading.gif" alt="" width="600px" height='480px'></li>
    </ul>
  </div>
//js
$('ul img').lazyload()

这样就完成了最简易的图片懒加载了

可自行拓展延伸

<script>
    //后端分页进行滚动加载
    $(function () {
      var pageNo = 1, //页码
        pageSize = 10; //条数
      imgLists(pageNo); //获取数据
      $(window).scroll(function () { //滚动条事件
        var scrollTop = Math.ceil($(this).scrollTop()); //滚动条与页面高度 //小数点原因  向上取整
        var curHeight = $(this).height(); //可视区域高度
        var totalHeight = $(document).height(); //页面总高度
        if (scrollTop + curHeight >= totalHeight) { //滚动条触底加载
          imgLists(pageNo++)
        }
      })
      //获取数据  1.引用jQuery、jquery.lazyload   2.img中固定写法  data-original    3.$('ul li img').lazyload();
      function imgLists(pageNo) {
        $.ajax({
          type: 'get',
          url: '192.168.0.999:8080/home/page/' + pageNo + '/' + pageSize,
          dataType: 'json',
          success: function (res) { //成功
            $.each(res, function (index, item) {
              $('ul').append(
                `<li>
                  <img data-original='${item.img}' src='https://xxxxxxloading.gif' height='480px' width='600px'>
                 </li>`)
            })
            //懒加载
            $('ul img').lazyload();

          },
          error: function (res) { //失败

          },
        })
      }
    })
  </script>