网页中图片太多会降低网页的加载速度，影响用户体验。jQuery是目前用的最多的JavaScript框架，基于jQuery的Lazy Load插件可以很方便的实现网页图片延迟显示，提升用户体验。
网页中图片太多会降低网页的加载速度，影响用户体验。jQuery是目前用的最多的JavaScript框架，基于jQuery的Lazy Load插件可以很方便的实现网页图片延迟显示，提升用户体验。
Lazy Load使用也非常简单，只要几行代码就可以实现网页图片的延迟显示效果，下面的几个例子展示了Lazy Load的使用方法与强大效果。
加载Lazy Load脚本
在HTML<head></head>中加上jQuery和Lazy Load的脚本。
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
Lazy Load图片延时加载效果
对网页中所有的图片都使用延时加载：
$("img").lazyload();
使用选择符给部分图片延迟加载：
$("img.lazy").lazyload();
$("#contrainer img").lazyload();
$(".slideshow img").lazyload();
设置敏感性，也就是距离边界的距离，默认是0
$("img").lazyload({ threshold : 200 });
设置点位图片，可以设定一个占位图片并定义事件来触发加载动作. 这时需要为占位图片设定一个 URL 地址. 透明, 灰色和白色的 1×1 象素的图片已经包含在插件里面.
$("img").lazyload({ placeholder : "img/grey.gif" });
设置图片加载事件
这里可以设置一切jQuery的事件，也可以自定义事件名称
$("img").lazyload({
placeholder : "img/grey.gif",
event : "click"
});
设置图片加载效果
$("img").lazyload({
placeholder : "img/grey.gif",
effect : "fadeIn"
});
最新的Lazy Load不再是一个Dropin的方案，需要将图片的网址写到“data-original”属性里面。
<img data-original="img/example.jpg" src="img/grey.gif">
更新详细的Lazy Load使用方法请参考官方
- http://www.appelsiini.net/projects/lazyload