日期:2014-05-16  浏览次数:20426 次

jquery.lazyload.js下载以及 图片延迟加载的使用

图片延迟加载,网上有很多资料,但是我找jquery.lazyload.js找了很久没发现,而且很多地方的js不对,

想来想去这个应该也是jquery的一个插件,于是搜索jquery的所有插件,终于发现了,下载地址如下:

https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.js

这个是最新版本的jquery.lazyload.js

下面来介绍下使用方法:

?

首先引入所需js

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

注:我用的是最新版本的jquery核心库
<script src="jquery.lazyload.js" type="text/javascript"></script>

?

然后将<img>文件改变

<img? src="img/grey.gif" data-original="img/example.jpg"? width="640" heigh="480">

src是用于占位的图片 data-original是真实图片地址

最后写js代码

$("img").lazyload();

或者延迟指定时间加载(这里是5000)

$(function() {?????????
??? $("img").lazyload({
??????? event : "sporty"
??? });
});
$(window).bind("load", function() {
??? var timeout = setTimeout(function() { $("img").trigger("sporty") }, 5000);
});

参考与

http://www.appelsiini.net/projects/lazyload

?

?

?