图片懒加载lazyload

图片懒加载：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的图片不加载