带型带秀专题之 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

（完）