jQuery插件推荐系列(6):图片延时加载插件

今天介绍的这款插件，我个人觉得在图片为主的网站中是必不可少的。网站中包含大量的图片，如果一次性的加载完毕，那么会浪费N多的流量，并且用户并不一定会看完图片，造成了加载多余浪费的现象，这款插件就很好的解决了这个问题。

用法相当的简单

<script src="jquery.js"></script>

<script src="jquery.lazyload.js"></script>

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

$(function() {

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

});

这里比较重要的是一定要有image标签，记得添加data-original属性，属性值写图片的地址，宽和高不是一定的。

上面演示的是最简单的使用方式，当然它还有更多的配置选项。

$(function() {

$("img.lazy").lazyload({

placeholder : “img/default.gif”,//当图片还没有加载出来的时候默认占位图片，加载出来后自动隐藏。

threshold : 200,//默认是当图片到可视窗口时加载，但可以自定义距离可是窗口多少像素的时候开始加载，这里设置200px。

event : "click",//默认的加载出发事件是滚动到可视窗口，当然你可以使用click，mouseover等事件，也可以自定义事件触发加载。

effect : "fadeIn",//默认是调用show()的方法，这里你可以自定义。

failurelimit : 10,//lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题。

});

});

更多详细配置和使用案例可查阅官网

官网：http://www.appelsiini.net/projects/lazyload

相关推荐：jQuery插件推荐系列（5）:几款流行优秀的流布局插件