今天开始带型带秀专题 -- Lazy Load。先从使用比较广泛的 jQuery Lazy Load 插件开始，逐步深入。该插件已经开发到了第二版，有兴趣的同学可以去看一看。专题第二节会深入到源码。
Lazy Load Plugin for jQuery
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）查看页面实际加载的内容。
➻ 用法
Lazy Load依赖于jQuery，在HTML中将其引入。
引入脚本后，你还需要改变img元素的的HTML代码。添加data-original属性，其值为所要加载图片的URL。除此之外，推荐为使用Lazy Load的图片元素添加特定的class。这样你可以轻松的控制插件绑定到哪些图片。
例如：
![]()
然后在脚本中添加：
$(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
widthandheightas not.not(":visible"). This causes images to appear only when you scroll a bit. Either fix your image tags or keepskip_invisibleasfalse. Use this feature only if you know what you are doing.
➻ 安装
你可以使用bower或者npm安装：
$ bower install jquery.lazyload
$ npm install jquery-lazyload（完）