一、JQuery.lazyload基础使用
1.引入
<script src="/Lib/Script/jquery.lazyload.min.js"></script>
2.JS
function lazy() {
$("img").lazyload({
effect: "fadeIn",
});
}
3.css
给img元素添加属性,data-original=" //图片的src地址 "
注意:这里必须设置图片的width和height,否则插件可能无法正常工作。
二、JQuery.lazyload的其他配置
1.设置临界点
如果你想提前加载图片, 可以设置threshold 选项, 如:设置 threshold 为 200 令图片在距离屏幕 200 像素时提前加载。
$("img").lazyload({
threshold : 200
});
2.设置占位符图片和自定事件来触发加载图片事件
$("img").lazyload({
placeholder : "img/grey.gif",
event : "click"
});