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

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代码看起来这样:

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

这是所有拥有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。

PS:

第一次被迫翻译文章，其中有不妥之处，敬请指正。