jQuery延迟加载插件(Lazy Load)详解

最 新版本的Lazy Load并不能替代你的网页。即便你使用JavaScript移除了图片的src属性，有些现代的浏览器仍然会加载图片。现在你必须修改你的html代 码，使用占位图片作为img标签的src属性。真实的图片地址应该存储在data-original属性中。

<img data-original="img/example.jpg" src="img/grey.gif"> 

 

好处是现在你可以把你所有的JavaScript脚本放在页面的底部。如果你想支持没有启用JavaScript的浏览器，你必须在<noscript>标签内包含原始图像。阅读下面的文档获取更多信息。

Lazy Load 是用JavaScript编写的jQuery插件。它会延迟长页面中的图片加载。可视区域外的图片在用户滚动到他们之前不会加载。这与图片预加载(image preloading)是截然相反的情况。

在包含很多大体积图片的长页面中使用Lazy Load，会使加快页面的载入速度。当可视区域的图片加载完成后，浏览器将会处于准备状态。在一些情况下，这也会帮助服务器降低负载。

Lazy Load 灵感来自 Matt Mlinac 开发的 YUI ImageLoader工具箱。

这里有一些演示页面:basic options,with fadein effect,noscript fallback, horizontal scrolling,horizontal scrolling inside container, vertical scrolling inside container, page with gazillion images 和load images using timeout.

当检查每个请求之间的演示清除浏览器缓存。你可以检查实际上的加载情况:开发者控制台(Chrome、Safari)，FireBug(Firefox)，HTTPHeaders(IE)

怎样使用?

Lazy Load依赖jQuery。在你的HTML代码的底部包含它们：

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

 

你 必须修改你的HTML代码。使用占位图片作为img的src属性的值，演示页面使用1x1像素的灰色gif作为占位图片，然后设置data- original属性的值为图片实际的URL地址，给需要延迟加载图片的指定特定类。通过这种方式，你可以轻松地控制延迟图片的绑定。

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

 

 

JS代码看起来这样:

<script type="text/javascript" charset="utf-8">  
 $(function() {       
$("img.lazy").lazyload({effect: "fadeIn"});   
}); 
</script>

 在图片中也可以不使用 class="lazy"，初始化时使用：

$("img").lazyload({effect: "fadeIn"});

这样就可以对全局的图片都有效！

如果想提前载入图片，可以使用 threshold 进行设置，

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

以上实例的含义是：在图片距离屏幕180px时提前载入：

参数设置

$("img.lazy").lazyload({
  placeholder : "img/grey.gif", //用图片提前占位
    // placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏
  effect: "fadeIn", // 载入使用何种效果
    // effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
  threshold: 200, // 提前开始加载
    // threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉
  event: 'click',  // 事件触发时才加载
    // event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…
  container: $("#container"),  // 对某容器中的图片实现效果
    // container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片
  failurelimit : 10 // 图片排序混乱时
     // failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.
});

 

这是所有拥有lazy类可以延迟加载的原因。查看基本选项演示。

为不支持JS的浏览器设置回退

事 实上几乎所有的浏览器都启用JavaScript。但是在一些情况下，即使客户端的请求不支持JavaScript，你仍然想显示真实的图像。 Google crawlers不会执行JS，但是仍然看起来像是忽略了noscript的内容。当JavaScript没有启用的时候，为了优雅降级，你可以 在<noscript>块中包含实际图片标签。

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

<noscript>
<img src="img/example.jpg" width="640" heigh="480">
</noscript> 

 

为了阻止占位图和实际图片在同一时间显示，使用css隐藏占位图。

.lazy {   display: none; } 

 

对启用JavaScript的浏览器，当文档载入的时候，你必须显示占位图。当插件初始化的同时，

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

 

当你想要该插件平稳退化，所有可选的都应该完成。

设置敏感度

当图片出现在可视区域内，默认才会加载。如果你想提前加载图片，可以设置threshold参数。设置threshold为200，图片离可视区域底部还有200像素的时候才会加载。

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

 

手动触发事件载入

事件可以是任何jQuery的事件，例如click或mouseover。你可以使用自定义的事件，例如sporty或foobar。默认会等待直到用户滚动到图片出现在窗口。为了阻止所有图片加载，直到占位图点击的时候才加载，你可以这样做:

$("img.lazy").lazyload({      event : "click" }); 

 

使用效果

默认情况下，插件会等待图片完全载入，并用show()去显示它。但是你可以使用任意你想要的效果。下面的代码使用了fadeIn效果。你可以在效果展示页查看它如何工作。

$("img.lazy").lazyload({      effect : "fadeIn" }); 

 

图片在容器中

你也可以对滚动容器中的图片使用该插件，比如有滚动调的div。只需要传递把容器作为jQuery对象传递给插件。这儿有针对水平容器和垂直容器的演示。

#container {     height: 600px;     overflow: scroll; } 

$("img.lazy").lazyload({               container: $("#container") }); 

 

当图片不连续时

After scrolling page Lazy Load loops though unloaded images.在循环中，如果图片变为可见。默认情况下，当第一张不可见的图片被发现，轮询就会停止。这是基于以下假设。图片在页面中的排列和图片在 HTML代码中的排列必须一致。假设在一些错误布局的情况下，你可以使用failure_limit选项控制加载行为。

$("img.lazy").lazyload({      failure_limit : 10 }); 

 

设置failure_limit为10会导致插件停止搜索图片去加载，在找到10张图片之后。如果你有一个时髦的布局，可以把该数字设置得更高一些。

延迟加载的图像

延迟加载的一个不完全的功能，它也可能延迟载入中的图片。下面的代码等待页面载入完成(HTML和可见图像全部加载)。页面加载完成后5秒，指定区域的图片会自动加载。延迟加载演示。

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

 

加载不可见的图片

在有些情况下，图片是不可见的。例如，当使用插件，在一个大的可筛选项目里，它们的可见状态是会动态改变的。为了提高Lazy Load的性能，默认会忽略不可见的图片。如果你想载入不可见的图片，设置skip_invisible为false。

$("img.lazy").lazyload({      skip_invisible : false }); 

 

下载

最 新版本的：源码文件，压缩文件。测试过该插件的浏览器：OSX平台的Safari 5.1, Firefox 3.6, Firefox 7.0, Firefox 8.0；Windows平台的Firefox 3.0, Chrome 14， IE 8；iOS版本的iPhone和iPad平台的Safari 5.1。