图片懒加载插件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
});