图片懒加载插件lazyload使用方法

一、如何使用：
 
Lazy Load 依赖于 jQuery。引入文件
 
<script type="text/javascript" src="jquery.js"></script>
 
<script type="text/javascript" src="jquery.lazyload.js"></script>
 
图片基本属性的设置
 
<img class="lazy"  src="img/grey.gif"   alt="图"  width="640"  height="480"  data-original="img/example.jpg" />
 
最后使用：
 
$(function() {
 
$("img.lazy").lazyload();
 
});二、基本选项：
 
1、设置临界点
 
默认情况下图片会出现在屏幕时加载. 如果你想提前加载图片, 可以设置threshold 选项, 设置 threshold 为 200 令图片在距离屏幕 200 像素时提前加载.
 
$("img.lazy").lazyload({
 
threshold : 200
 
});
 
2、设置事件来触发加载
 
你可以使用jQuery事件，例如click和mouseover。也可以使用自定义事件。
 
$("img.lazy").lazyload({
 
event : "click"
 
});
 
3、使用特效
 
默认情况下，插件等待图像完全加载并调用show()。你可以使用任何你想要的效果。下面的代码使用fadeIn （淡入效果）。
 
$("img.lazy").lazyload({
 
effect : "fadeIn"
 
});
 
4、加载隐藏的图片
 
为了提升性能, Lazy Load 默认忽略了隐藏图片. 如果你想要加载隐藏图片, 请将 skip_invisible 设为 false
 
$("img.lazy").lazyload({
 
skip_invisible : false
 
});