Hot!Ajax

当一个页面中图片很多时，应用此方法可以加快页面的加载速度，因为它并不是一次性加载所有的图片，而是当你拉动滚动条时下面的图片才依次加载，它的效果与图片预览正好相反。

Lazyloader is inspired by YUI ImageLoader Utility by Matt Mlinac.

预览

怎样使用？

Lazy Load 是基于 jQuery 的 and dimensions by Brandon Aaron.

将下面的代码加入到你的head部分:

<script src="/jquery.js" mce_src="/jquery.js" type="text/javascript"></script>    <script src="/jquery.dimensions.js" mce_src="/jquery.dimensions.js" type="text/javascript"></script>    <script src="/jquery.lazyload.js" mce_src="/jquery.lazyload.js" type="text/javascript"></script> 

代码:

$("img").lazyload();

 

它将使文件夹下的图片延迟加载。你可以设置选项threshold的值以控制图片的加载方式，默认值是0（当图片框显示时图片将被加载）

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

 

将threshold的值设为200时即图片将加载200pixels直到它可见。

 

你也可以自己设定placeholder以触发加载。placeholder的只是一个图片的地址，它是一个

1×1 pixel的灰白色图片。

$("img").lazyload({ placeholder : "img/grey.gif" });

 

自定义事件可以是jQuery所包含的事件，例如点击或鼠标滑过。默认的是用户滚动滚动条直到图片框全部出现。

$("img").lazyload({       placeholder : "img/grey.gif",      event : "click"   });

下载

最新的 source, minified or packed.

< Prev