图片懒加载lazyload

Posted 2020-09-29 waiting_h

图片懒加载：jquery && jquery-lazyload

图片懒加载是一种前端性能优化方案：随着视图区的滚动，加载剩下的图片，这样当滚动条没有滚动到下面的时候，图片不加载，减少资源浪费

原本：<img src="images/img1.jpg" >

懒加载：<img class="lazy" data-original="images/img1.jpg" >

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

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

<script>

　　$(function() {　　

　　　　$(‘img.lazy‘).lazyload();

　　})

</script>

注意：对于需要懒加载的图片需要提前设置好大小，否则懒加载功能无效

懒加载还可以设置一些参数来达到炫酷的效果：

• $("img.lazy").lazyload({ placeholder : ‘"./img/placeholder_img.jpg" });

默认时未加载的图片是一块灰色背景板，通过该placeholder可以设置默认图片占位，可对比类似input的placeholder

• $("img.lazy").lazyload({ threshold : 200 });

在默认情况下，视图区到达图片位置时，图片才开始加载，而如上例threshold: 200的设置会让视图区距离图片位置还有200px的时候图片开始加载

 

• $("img.lazy").lazyload({ event : "click" });

默认情况下，图片出现在视图区的时候就直接加载，而我们可以通过设置事件触发来让图片在某种特定事件中加载，如上例event: "click"的设置会当我们点击图片时图片才加载

• $("img.lazy").lazyload({ effect : "fadeIn" });

默认情况下，图片会以show()的动画效果加载出来，我们可以通过设置effect参数让图片以我们想要的效果出现，如上例effect: "fadeIn"的设置会使图片渐进加载出来

• #container { height: 600px; overflow: scroll; }       $("img.lazy").lazyload({ container: $("#container") });

以上的例子中我们默认图片文档流在整个浏览器窗口下，视图的延伸改变是通过浏览器滚动条来拖动，而通过container参数我们可以设置固定容器，让图片在设置的容器中懒加载，如上例，此时我们需要设置容器的大小，并允许容器溢出滚动

• $("img.lazy").lazyload({ failure_limit : 10 });

默认情况，插件循环搜索所有未加载的图片，直到找到第一个未加载的，就停止继续搜索，插件默认是按照文档流来搜索图片，而有些布局会导致图片的实际位置与文档流中的先后顺序不一样，这时可能会出现在视图上排在前面的图片为加载，而排在后面的开始加载了，该参数属性的设置，会让插件循环到第10个未加载的图片才停止

• $("img.lazy").lazyload({ skip_invisible : true });

文档流中的图片并不是所有都是visible的，对于invisible的图片，压根不需要加载，更不需要懒加载，通过设置skip_invisible: true可以跳过invisible的图片不加载