Lazy Load延迟加载也有的称为惰性加载，是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.
在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担.
延迟加载是程序人性化的一种体现，提高用户体验，防止一次性加载大量数据，而是根据用户需要进行数据查询操作。
一、怎么使用?
1. Lazy Load 依赖于 jQuery,将下列代码加入页面 head 区域,当然也可以将这些代码放在</body>之前
<script src=”jquery-1.7.1.min.js” type=”text/javascript”></script>
<script src=”jquery.lazyload.mini.js” type=”text/javascript”></script>
2. HTML代码中src属性可以是1×1像素灰色gif,也可以是我们常用的一些等待加载图标.data-original属性才是我们需要加的图片
<img class=”lazy” src=”img/grey.gif” data-original=”img/example.jpg” width=”640″ heigh=”480″>
3.然后在执行代码中加入
$(“img.lazy”).lazyload();
这样样式为lazy的图片都将进行延迟加载.
二、禁用JavaScript浏览器的退路
几乎所有人的浏览器都启用JavaScript。当然也有某些情况下也有或禁用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();
这样当我们的浏览器都禁用JavaScript的时候也可以显示我们需要的图片。
三、设置灵敏度
默认情况下图片出现在浏览器可视区域就加载，浏览器可视区域外不加载。如果想要浏览器可视区域外的图片来加载可以设置阈值参数。threshold 选项默认值为 0（浏览器可视区域到图片的距离）。
$(“img.lazy”).lazyload({ threshold : 200 });
这样，当浏览器可视区与图片的距离太到200像素时图片就进行加载。
四、事件来触发加载
事件可以是任何jQuery或mouseover事件,比如点击。您也可以使用自己的自定义事件,如运动或foobar。默认是当到用户滚动浏览器使图片出现在可视区域加载。
$(“img.lazy”).lazyload({ event : “click” });
五、使用特效
默认情况下插件等待图像完全加载用show()来显示它。我们可以使用任何你想要的效果。下面的代码使用fadeIn效果。
$(“img.lazy”).lazyload({ effect : “fadeIn” });
六、容器内图像加载
可以使用插件在滚动图像容器加载,比如div和滚动条。只需通过这个容器作为jQuery对象。
CSS部份
#Container { height: 600px; overflow: scroll; }
js部份
$(“img.lazy”).lazyload({ container: $(“#container”) });
七、当图片不顺序排列
滚动页面的时候, Lazy Load 会循环为加载的图片. 在循环中检测图片是否在可视区域内. 默认情况下在找到第一张不在可见区域的图片时停止循环. 图片被认为是流式分布的, 图片在页面中的次序和 HTML 代码中次序相同. 但是在一些布局中, 这样的假设是不成立的. 不过我们可以通过 failurelimit 选项来控制加载行为.
$(“img.lazy”).lazyload({ failure_limit : 10 });
将 failurelimit 设为 10， 当插件找到 10 个不在可见区域的图片是才停止搜索. 如果你有一个猥琐的布局, 请把这个参数设高一点.
八、延迟加载图片
Lazy Load 插件的一个不完整的功能, 但是也能用来实现图片的延迟加载. 下面的代码实现了页面加载完成后再加载. 页面加载完成 5 秒后, 指定区域内的图片会自动进行加载.
$(function() {
$(“img:below-the-fold”).lazyload({ event : “sporty” });
});
$(window).bind(“load”, function() {
var timeout = setTimeout(function() {$(“img.lazy”).trigger(“sporty”)}, 5000);
});
参数说明
名称 默认值 说明 container window 父容器。延迟加载父容器中的图片。 [Demo1] [Demo2] event 'scroll' 触发加载的事件 [Demo] effect 'show' 加载使用的动画效果，如 show, fadeIn, slideDown 等 jQuery 自带的效果，或者自定义动画。 [Demo] effectspeed undefined 动画时间。作为 effect 的参数使用：effect(effectspeed) data_attribute 'original' 真实图片地址的 data 属性后缀 threshold 0 灵敏度。默认为 0 表示当图片出现在显示区域中的立即加载显示；设为整数表示图片距离 x 像素进入显示区域时进行加载；设为负数表示图片进入显示区域 x 像素时进行加载。 failure_limit 0 容差范围。页面滚动时，Lazy Load 会遍历延迟加载的图片，检查是否在显示区域内，默认找到第 1 张不可见的图片时，就终止遍历。因为 Lazy Load 认为图片的排序是与 HTML 中的代码中的排序相同，但是也可能会出现例外，通过该值来扩大容差范围。 skip_invisible true 跳过隐藏的图片。图片不可见时（如 display:none），不强制加载。 appear null 图片加载时的事件 (Function)，有 2 个参数：elements_left（未加载的图片数量）、settings（lazyload 的参数）。[Demo]（参考 DEMO 的源代码） load null 图片加载后的事件 (Function)，有 2 个参数，同 appear 。[Demo]（参考 DEMO 的源代码）