LazyLoad是一个Js编写的Jq插件,它可以延迟加载页面中的图片,在浏览器可视范围中的图片会被加载。
如何使用:LazyLoad依赖于Jquery,在html的结尾处 ,就是在</body>前。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.lazyload.js"></script>
你必须改变图片的标签,图片的地址必须放到data-original属性上。给懒加载图片一个指定的class(例如:lazy)代码如下:
html:<img class="lazy" alt="" width="640" height="480" data-original="img/example.jpg" />
js:$(function() {
$("img.lazy").lazyload();
})
这会将所有图进行延迟加载
设置临界点
默认情况下只有图片出现在屏幕时才会加载,如果你想提前加载图片,那么可以设置threshold,这个属性的单位是px,不过赋值的时候不用带px ,呵呵。
设置事件来触发加载
$("img.lazy").lazyload({
event : "click"
});
使用特效
$("img.lazy").lazyload({
effect : "fadeIn"
});
相关文章
- 07-29jQuery 之 模态编辑框实例(文本获取值与设置值)
- 07-29bootstrap用jquery控制模态框
- 07-29jquery-3.5.1 js获取当前服务器所在路径
- 07-29JQuery获取实时时间(年、月、日、时、分、秒)
- 07-29JQuery.Ajax()的data参数类型
- 07-29[jQuery]计算年龄
- 07-29jquery 实现数字动态变化
- 07-29Jquery选择器
- 07-29JQuery实现简单的国际象棋棋盘
- 07-29jquery的qrcode快速实现二维码生成