有你在真好 的个人博客
jQuery插件推荐系列(6)-图片延时加载插件
阅读:2031 添加日期:3/30/2021 5:41:33 PM

今天介绍的这款插件,我个人觉得在图片为主的网站中是必不可少的。网站中包含大量的图片,如果一次性的加载完毕,那么会浪费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):几款流行优秀的流布局插件