jQuery图片延迟加载插件Lazy Load
简介
Lazy Load 是一款基于 jQuery 的图片延迟加载插件,它可以让浏览器可视区域外的图片不加载,当滚动到它们的位置时才加载。
延迟加载可以使页面加载更快,减少服务器的负担,甚至是节约带宽。
兼容性
Lazy Load 兼容所有浏览器,包括 IE6、IE7。
使用方法
1、引入文件
<script src="js/jquery.min.js"></script> <script src="js/jquery.lazyload.js"></script>
2、HTML
<img src="images/blank.gif" data-original="images/big-1.jpg" width="640" height="480">
注意:必须指定图片的宽度和高度,或者在 CSS 中设置也可以,否则不会延迟加载。
3、JavaScript
$(function() { $('img.lazy').lazyload(); });
参数
参数 | 说明 | 默认值 |
---|---|---|
threshold | 阈值/临界点 | 0 |
failure_limit | ||
event | 图片加载事件 | scroll |
effect | 图片加载显示效果 | show |
container | window | |
data_attribute | original | |
skip_invisible | ||
appear | ||
load | ||
placeholder | 未加载图片的 src | base64 png |
标签:jQuery插件