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" type="text/javascript"></script>   
<script src="jquery.dimensions.js" type="text/javascript"></script>  
 <script src="jquery.lazyload.js" type="text/javascript"></script>
   

代码:

$("img").lazyload();
   

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

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

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

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

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

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

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

下载

最新的 source, minified or packed.

Comments (0)

Show/Hide comments

Show/Hide comment form

Name

Email

Website

Comment

smaller | bigger

Subscribe via email (Registered users only)

I have read and agree to the Terms of Usage.

Write the displayed characters

Add Comment