html、
赞
踩
1、下载
官网下载地址:http://plugins.jquery.com/lazyload/
2、引入
<script src="./jquery.js"></script>
<script src="./jquery.lazyload.min.js"></script>
html、
- <ul>
- <li><img data-original="./img/11.jpg" src="./img/11.jpg" /></li>
- <li><img data-original="./img/22.jpg" /></li>
- <li><img data-original="./img/33.jpg" /></li>
- <li><img data-original="./img/44.jpg" /></li>
- <li><img data-original="./img/55.jpg" /></li>
- <li><img data-original="./img/66.jpg" /></li>
- <li><img data-original="./img/77.jpg" /></li>
- </ul>
js、
- $(function() {
- $("img").lazyload();
- });
1、提前加载,图片距离屏幕100px时提前加载
$("img").lazyload({
threshold : 100
});
2、使用特效,值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
$("img").lazyload({
effect : "fadeIn"
});
3、隐藏图片,当界面有很多隐藏图片的时候并希望加载的时候则使用kip_invisible 属性,将其设置为false
$("img").lazyload({
skip_invisible : false
});
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。