一客盒饭

胡吉阳(Hackfan)的个人博客

【译】Lazy Load(网页图片缓载)

2010年2月5日由 Hackfan | 有 876 人次阅读留言 »

【原文】http://www.appelsiini.net/projects/lazyload

【译者】Hujiy ( Hackfan )

　　Lazy load是一个jQuery插件。他能够延迟加载网页（特别是很长的网页）中的图片。在用户可视区域外的图片，直到用户看到它们时，才会被加载。这一点与图片预加载的做法是截然相反的。

　　在一张很长且包含很多大图片的网页上，采用Lazy Load，会使得网页加载速度变快。浏览器在加载可视的图片后，停留在“完成”状态。Lazy Load对降低服务器负载也有帮助。

　　（译者注：译者认为Lazy Loader旨在降低服务器负载、带宽与并发数，也可以加快单张图片的加载速度，但对于那些想一口气看完一推大图片的用户来说，Lazy Load将是他们享受这些图片的噩梦。）

　　Lazy Load受到Matt Mlinan开发的YUI ImageLoader工具箱的启发。点击查看(Lazy Load)的演示。

如何使用？

　　Lazy Load依赖于jQuery(doh!)。将以下代码包含在你的网页头部：

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

　　并在你的Javascript中，应用它：

$("img").lazyload();

　　这将使得网页中的所有图片被缓载。

设置灵敏度

　　Lazy Load提供一定的参数来控制其行为。你可以通过设置threshold参数来告知Lazy Load，图片距可视范围多远时，应当被加载了。默认值为0（当图片在可视区域内时才被加载）。

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

　　将threshold设置为200，图片将在距可视区域200像素内，被加载。

占位图片

　　你可以设置占位图片以及触发加载图片的事件。placeholder参数应当是一个指向图片的URL。插件自带透明、灰色和白色的1×1图片。

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

触发加载事件

　　触发事件可以是任何jQuery事件，如click或mouseover。你也可以使用自定义的事件，如sporty或foobar。默认的事件是等待用户下拉滚动条至指定范围内。

　　以下代码可使图片使用灰色占位图，当用户单击占位图时，图片才被加载：

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

使用特效

　　当图片完全加载时，插件默认使用show()来显示它。你可以使用任何你想要的效果。以下代码使用fadeIn效果。单击链接查看效果。

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

容器中的图片

　　插件也可以被用于可滚动的容器中，如带有滚动条的层。将容器的jQuery对象作为参数传递即可。这里有一个水平和垂直的容器演示。

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

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

当图片显示顺序与代码循序不一致时

　　（译者注：jQuery遍历img是按照<img />标签在HTML代码中的顺序进行的，而浏览器显示网页则是按照CSS布局，因此两者的顺序有可能不一致。同时，为了加快运行速度，Lazy Load设置了一种机制：当遍历未加载图片超过n个均不在显示区域内时，停止此次遍历，即停止加载图片。）

　　当页面滚动后，Lazy Load会遍历未加载的图片，检查每张图片是否已在可视区域内。默认情况下，循环将在发现第一张不在可视区域内图片时停止。这样处理基于以下考虑：图片在网页上的顺序与在HTML代码中的顺序是一致的。但有些布局中，这样的假设是错的。你可以通过failurelimit选项来控制加载行为。

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

　　将failurelimit设置为10，表示Lazy Load将在遍历到10个不可见的图片之后，停止加载任何图片。如果你的布局怪异，请调高此参数。

延迟加载图片

　　Lazy Load没有提供延迟加载图片特性，但有变通的方法来实现它。以下代码将在页面完成加载（包括HTML与可见图片）5秒种后，自动加载不在可视区域内的图片。你可以点击查看延迟加载演示。

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