lazyload懒加载的使用与避坑

提前准备

引入Jquery    
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
引入lazyload    
<script src="https://cdn.bootcdn.net/ajax/libs/jquery_lazyload/1.9.7/jquery.lazyload.min.js"></script>

HTML

<div class="picture_cont">
    这里有无数个图片
    <img class="lazy" data-original="{{img.url}}" width="100%" height="100%" alt="" />
</div>

JS

 $("img.lazy").lazyload({
     threshold: 300,     // 滚动到距离图片300px时，开始加载图片
     effect: "fadeIn",   // 显示特效 可选值  fadeIn/show/sildeshow
     container: $(".picture_cont"), // 懒加载区域容器（有坑）
     failure_limit: 10, //页面布局图片的顺序和html图片代码的顺序不一致;它会导致本该加载的没有加载,用它，尽量设置的高些
     kip_invisible: true,//为了提升性能，插件默认忽略隐藏的图片；如果想要加载隐藏图片.设置skip_invisible为false;
     event : "click", //图片点击后，才开始加载
     placeholder : 'assets/img/grey.gif',    //这个是加载前的显示图片        
 });

坑点

• lazyload  滚蛋懒加载默认监听的是window的滚动事件，如果是在某一个区域内进行懒加载处理，需要使用 适用  lazyload 的配置属性 container
• container 必须有属性scroll（就是开启溢出滚动） 才能开启懒加载否则无懒加载效果，注意避坑！