带型带秀专题之 Lazy Load (一)

今天开始带型带秀专题 -- Lazy Load。先从使用比较广泛的 jQuery Lazy Load 插件开始，逐步深入。该插件已经开发到了第二版，有兴趣的同学可以去看一看。专题第二节会深入到源码。

Lazy Load Plugin for jQuery

Github 地址

Lazy Load用于延迟加载图片。它会延迟加载视口外的图片，直到用户滚动页面使其出现。与图片预加载正好相反。

在包含许多大图片的长页面上使用Lazy Load可使页面加载速度更快。在可视图片加载后，浏览器将处于就绪状态。某些情况下也可帮助服务器减少负载。

Lazy Load启发于 Matt Mlinac 的 YUI ImageLoader。

这里有几个demo可以让你快速体验：basic options, with fadein effect, noscript fallback, page with gazillion images and load images using timeout.

注意！查看新的demo时清除缓存。你可以使用开发者工具（Chrome，Safari IE）或Firebug（Firefox）查看页面实际加载的内容。

---

➻ 用法

<!-- more -->
Lazy Load依赖于jQuery，在HTML中将其引入。

<script src="jquery.js"></script>
<script scr="jquery.lazyload.js"></script>

引入脚本后，你还需要改变img元素的的HTML代码。添加data-original属性，其值为所要加载图片的URL。除此之外，推荐为使用Lazy Load的图片元素添加特定的class。这样你可以轻松的控制插件绑定到哪些图片。

例如：

<img class="lazy" data-original="img/example.jpg" width="640" height="400">

然后在脚本中添加：

$(function () {
    $("img.lazy").lazyload();  
});

这将会使所有拥有lazy类名的图片延迟加载。

注意！你必须通过width和height属性或者在CSS中为图片设置尺寸。否则插件不能正常工作。

➻ 设置阀值

默认情况下，图片出现在屏幕中时才被加载。如果你想提前加载图片，可以使用threshold参数。如下面的代码，将阀值设置为 200 时，图片会提前200像素被加载。

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

➻ 自定义触发事件

你可以使用jQuery事件，如click或mouseover；也可以使用自定义事件，如sporty或foobar。默认的事件是用户滚动且图像出现在视口中。如果想让用户点击时图片才会显示，你可以这样做：

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

提示！ 你可以使用下面的技巧延迟加载图像。下面的代码会在页面加载完毕后等待五秒加载图像。See it working at delayed loading demo.

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

$(window).bind("load", function() {
    var timeout = setTimeout(function() {
        $("img.lazy").trigger("sporty")
    }, 5000);
});

➻ 使用效果

默认地，插件会在图片完全加载后调用show()方法。当然你也可以用你喜欢的效果。如下面的代码使用了fadeIn效果。Check how it works at effect demo page.

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

➻ 容器中的图像

你也可以为滚动容器中的图像应用此插件，例如带可滚动的div元素。只需要将该容器元素作为jQuery对象传递。这里有一个 水平 和 垂直 容器的例子。

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

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

➻ 当图片并非顺序

页面滚动后，插件会遍历未加载的图片。遍历会检查图片是否变的可见。默认地，循环会在找到第一个视口外的图像时停止。然而这是基于这样的假设：页面上图像的顺序与HTML代码中顺序相同。但是某些页面的布局不符合该假设。你可以设置failure_limit参数以控制加载行为。

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

将该参数设置为10表示当在视口下方找到10个图像时才会停止遍历图像。如果你的布局更加特别，可以把该参数值调为更高。最差的情况是该值为实际图片的数量。

➻ 处理不可见图片

有时会有这样的情况出现，图片在视口中在并不是:visible。为了提高性能，你可以选择忽略.not(':visible')的图像。

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

HEADS UP! Webkit browsers will report images with without width and height as not .not(":visible"). This causes images to appear only when you scroll a bit. Either fix your image tags or keep skip_invisible as false. Use this feature only if you know what you are doing.

➻ 安装

你可以使用bower或者npm安装：

$ bower install jquery.lazyload
$ npm install jquery-lazyload

（完）