图片懒加载插件jquery.lazyload.min.js

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
});