jQuery延迟加载（懒加载）

一、为什么需要懒加载？
对于图片过多的使用场景，为了提高页面加载速度，改善用户体验，我们对未出现在视野范围内的图片先不进行加载，等到出现在视野范围才去加载。
二、懒加载的实现原理
-它的实现原理很简单，先把img的src指向一个小图片，图片真实的地址存储在img一个自定义的属性里,<img src="lazy-load.png" data-src="xxx" />,等到此图片出现在视野范围内了，获取img元素，把data-src里的值赋给src。

使用：

<SCRIPT src="jquery.js" type=text/javascript></SCRIPT>
<SCRIPT src="jquery.lazyload.min.js" type=text/javascript></SCRIPT>

只需要引入这两个js就可以使用
html <img>部分我们不引入 src属性，真实图片的URL设置到data-original属性

<img class="lazy" src="" data-original="img/example.jpg"  width="640" heigh="480">

js部分

  $(function() {
        $("img").lazyload({
            threshold : 400,//灵敏度 --显示区域距顶部距离
            effect : "fadeIn",// 图片显示效果
            placeholder : "img/grey.gif", //用图片提前占位
        });
    });

搞定收工 最后添加效果图

微信图片_20180920164245.png 微信图片_20180920164249.png