jquery.lazyload 实现图片延迟加载jquery插件

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);

});

 

 

下载jquery.lazyload 地址：http://www.w3ccss.com/download/jquery.lazyload.rar