<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JQurey.LazyLoad.js插件使用说明</title>
1 先加载JQ
<script type="text/javascript" src="./js/jquery-1.9.1.min.js" ></script>
<script type="text/javascript" src="./js/jquery-lazyload.js" ></script>
</head>
<body bgcolor="#99CCCC">
<img src="http://www.0419.cn/data/afficheimg/20150203eeftvz.png" /><br><br>
<img src="http://www.0419.cn/data/afficheimg/20150203eeftvz.png" /><br><br>
2 需要加载的图片 src设置模糊小图片 ata-original设置 真实图片地址
<img data-original="../img2/1-2409.jpg" width="231" height="240" src="js/grey.gif" /><br>
<img data-original="../img2/5-2903.jpg" width="231" height="240" src="js/grey.gif" /><br>
<img data-original="../img2/9-2418.jpg" width="231" height="240" src="js/grey.gif" /><br>
<img data-original="../img2/10-2904.jpg" width="231" height="240" src="js/grey.gif" /><br>
<img data-original="../img2/11-2907.jpg" width="231" height="240" src="js/grey.gif" /><br>
<img data-original="../img2/29-3022.jpg" width="231" height="240" src="js/grey.gif" /><br>
<img data-original="../img2/4-137.jpg" width="231" height="240" src="js/grey.gif" /><br>
<img data-original="../img2/27-2900.jpg" width="231" height="240" src="js/grey.gif" /><br>
3 最后调用 jq代码
<script type="text/javascript">
$("img").lazyload({
effect : "fadeIn",
skip_invisible : true,
failure_limit : 20
});
</script>
</body>
</html>
链接：http://share.weiyun.com/852b06fd1e23de7db5bd43432cf76cc9 （密码：omOI）
-------------------------------------------------------------------------------------
更多参数
threshold : 200 当距离图片还有200像素的时候，就开始加载图片。
skip_invisible : false 加载不可见图像 （默认不加载）
只针对一个容器加载
#container { height: 200px; overflow: scroll; width:600px; }
<div id="container">
<img data-original="../img2/1-2409.jpg" width="231" height="240" src="js/grey.gif" />
<img data-original="../img2/5-2903.jpg" width="231" height="240" src="js/grey.gif" />
<img data-original="../img2/9-2418.jpg" width="231" height="240" src="js/grey.gif" />
<img data-original="../img2/10-2904.jpg" width="231" height="240" src="js/grey.gif" />
<img data-original="../img2/11-2907.jpg" width="231" height="240" src="js/grey.gif" />
<img data-original="../img2/29-3022.jpg" width="231" height="240" src="js/grey.gif" />>
<img data-original="../img2/4-137.jpg" width="231" height="240" src="js/grey.gif" />
<img data-original="../img2/27-2900.jpg" width="231" height="240" src="js/grey.gif" />
</div>
<script type="text/javascript">
$("img").lazyload({
container: $("#container"), 4 针对容器内加载
effect : "fadeIn",
skip_invisible : true,
failure_limit : 20
});
</script>