jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明

jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明

jquery.lazyload.js是一个用JavaScript编写的jQuery插件。它可以延迟加载长页面中的图片，在浏览器可视区域外的图片不会被载入。
直到用户将页面滚动到它们所在的位置，这与图片预加载的处理方式正好是相反的。
在包含很多大图片长页面中延迟加载图片可以加快页面加载速度，浏览器将会在加载可见图片之后即进入就绪状态，在淘宝商品详情页、漫画网站很多图片的情况下还可以帮助降低服务器负担。

一、下载和引用：
官网下载地址：http://plugins.jquery.com/lazyload/
Lazy Load 依赖于 jQuery. 所以需要引用2个js
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lazyload.js"></script>

注：这里要保证先加载了jquery.js 再加载jquery.lazyload.js，这里的顺序不只是先后顺序。
如果jquery.js里面用了 defer="defer" 或者异步async，jquery.lazyload.js也要对应加上，否则会导致jquery.lazyload.js先加载报错。

二、调用说明及注意事项：
要使用懒加载，需要去掉img的src标签，换成data-original，否则浏览器会默认加载src的内容。起不到懒加载的效果。

html代码
<img width="800" height="1600" data-original="img/test.jpg" />

js代码
$(document).ready(function(){
$("img").lazyload();
});
注意：这个代码也需要放到jquery.js加载后，否则会报$ undefined的错误

注意：这里必须设置图片的width，height，data-original否则插件无法正常使用。
这样设置会将所有的img的并且拥有data-original标签的图片更改为懒加载，必须用js处理才会加载图片，拉下来加载完成前默认为灰色的图片。

上面是最简单的调用，特殊的需求如：提前加载，避免网络过慢时加载缓慢，加载隐藏图片等等，都有相应的方法可以调用。

1.设置临界点
默认情况下图片会出现在屏幕时加载. 如果你想提前加载图片, 可以设置threshold 选项, 如：设置 threshold 为 200 令图片在距离屏幕 200 像素时提前加载。
$("img").lazyload({
threshold:200;
});

2.使用特效
默认情况下，图像完全加载并调用show()。你可以使用任何你想要的效果。下面的代码使用fadeIn （淡入效果）
$("img").lazyload({
effect:"fadeIn";
});

3.当图片不连续时
滚动页面的时候, Lazy Load 会循环为加载的图片. 在循环中检测图片是否在可视区域内. 默认情况下在找到第一张不在可见区域的图片时停止循环. 图片被认为是流式分布的, 图片在页面中的次序和 HTML 代码中次序相同. 但是在一些布局中, 这样的假设是不成立的. 不过你可以通过 failurelimit 选项来控制加载行为。
$("img").lazyload({
failure_limit:20;
});
　　将 failurelimit 设为 20 ，当插件找到 20 个不在可见区域的图片时停止搜索.

4.加载隐藏图片
当界面有很多隐藏图片的时候并希望加载他们的时候则使用kip_invisible 属性，将其设置为false
$("img").lazyload({
skip_invisible:false;
});
上面的方法基本满足常规的懒加载使用了，特殊的使用可查看官网API