jQuery.lazyload详解

首先说一下, 这里只是讲该插件的使用, 先说一下这个插件的作用,  可以延迟加载图片, 如果没有到查看图片的地方, 图片就不去加载, 这里可以对服务器的负载有很大的好处, 访问人越多, 效果越明显. 下面开始说下, 怎么使用该插件.

<script type="text/javascript" src="js/jquery.lazyload.js"></script>
<script type="text/javascript">
$(function() {
$("img").lazyload({
effect : "fadeIn"
});
});
</script>

fadeIn是图片显示效果

这样基本就可以了！

如果上面的功能可能没有达到你的要求，还有几个选项可供设置。

可以设置阀值来控制 灵敏度

$(“img”).lazyload({ threshold : 200 });

在这里img, 是一个标签. 这里就是jquery的基本用法, 可以取得一个标签的对象, 也可以是一个class, 或者是一个id, 如果是class 可以使用.img, 如果是id的话, 就要使用#img. 如果还想了解可以去了解一下jquery.

把阀值设置成200 意思就是当图片没有看到之前先load 200像素。当然了你也可以通过设置占位符图片和自定事件来触发加载图片事件

$("img").lazyload({
placeholder : "img/grey.gif",
event : "click"
});

还可以通过定义effect 参数来定义一些图片显示效果

$("img").lazyload({
placeholder : "img/grey.gif",
effect : "fadeIn"
});

事件触发加载，事件可以是任何 jQuery 时间, 如: click 和 mouseover. 你还可以使用自定义的事件, 如: sporty 和 foobar. 默认情况下处于等待状态, 直到用户滚动到窗口上图片所在位置. 在灰色占位图片被点击之前阻止加载图片, 你可以这样做:

$("img").lazyload({
placeholder : "img/grey.gif",
event : "click"
});

延迟加载图片，Lazy Load 插件的一个不完整的功能, 但是这也能用来实现图片的延迟加载. 下面的代码实现了页面加载完成后再加载. 页面加载完成 5 秒后, 指定区域内的图片会自动进行加载.

$(function() {
$("img:below-the-fold").lazyload({
placeholder : "img/grey.gif",
event : "sporty"
});
});
$(window).bind("load", function() {
var timeout = setTimeout(function() {$("img").trigger("sporty")}, 5000);
});

图片在容器里面你可以将插件用在可滚动容器的图片上, 例如带滚动条的 DIV 元素. 你要做的只是将容器定义为 jQuery 对象并作为参数传到初始化方法里面.

CSS

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

JavaScript 代码:

$("img").lazyload({
placeholder : "img/grey.gif",
container: $("#container")
});

当图片不顺序排列,滚动页面的时候, Lazy Load 会循环为加载的图片. 在循环中检测图片是否在可视区域内. 默认情况下在找到第一张不在可见区域的图片时停止循环. 图片被认为是流式分布的, 图片在页面中的次序和 HTML 代码中次序相同. 但是在一些布局中, 这样的假设是不成立的. 不过你可以通过 failurelimit 选项来控制加载行为.

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