通常如果页面图片特别多，图片加载就慢。会给服务器增加压力。因为网页解析是从上往下的，在解析的过程里，如果遇见资源了，浏览器会再次请求的，但是一个网页可能存在很多请求的资源，这样图片多了，容易导致页面出现空白。所以就会有懒加载效果来提高用户体验。
1.html
<
ul
class
=
"list clearfix"
>
<
li
><
a
href
=
"http://www.wanjiu.com"
><
img
src
=
"img/loading.gif"
data-original
=
"img/p1.jpg"
alt
=
"万酒网"
></
a
></
li
>
<
li
><
a
href
=
"http://www.wanjiu.com"
><
img
src
=
"img/loading.gif"
data-original
=
"img/p2.jpg"
alt
=
"万酒网"
></
a
></
li
>
<
li
><
a
href
=
"http://www.wanjiu.com"
><
img
src
=
"img/loading.gif"
data-original
=
"img/p3.jpg"
alt
=
"万酒网"
></
a
></
li
>
<
li
><
a
href
=
"http://www.wanjiu.com"
><
img
src
=
"img/loading.gif"
data-original
=
"img/p4.jpg"
alt
=
"万酒网"
></
a
></
li
>
<
li
><
a
href
=
"http://www.wanjiu.com"
><
img
src
=
"img/loading.gif"
data-original
=
"img/p5.jpg"
alt
=
"万酒网"
></
a
></
li
>
<
li
><
a
href
=
"http://www.wanjiu.com"
><
img
src
=
"img/loading.gif"
data-original
=
"img/p6.jpg"
alt
=
"万酒网"
></
a
></
li
>
下面多复制几个li就可以看到效果了
</
ul
>
2.css样式
img
a
,
img
{
border
:
0
px
;}
ol
,
ul
,
li
{
list-style-type
:
none
;
}
.clearfix:after
{
height
:
0
;
content
:
""
;
display
:
block
;
visibility
:
hidden
;
overflow
:
hidden
;
clear
:
both
;
}
.clearfix
{
zoom
:
1
;
/* For IE 6/7 (trigger hasLayout) */
}
.list
{
width
:
1170
px
;
margin
:
0
auto
;
}
.list
li
{
width
:
360
px
;
height
:
200
px
;
margin
:
0
15
px
15
px
0
;
float
:
left
;
border
:
1
px
solid
#ccc
;
}
.list
li
img
{
width
:
100
%
;
height
:
100
%
;
}
3.js的调用
<
script
type
=
"text/javascript"
charset
=
"utf-8"
>
$
(
function
() {
$
(
".list img"
).
lazyload
({
placeholder :
"img/loading.gif"
,
//默认的一张图片
effect:
"fadeIn"
,
//淡入效果
failure_limit :
20
,
threshold:
100
//图片距离屏幕一定距离时提前加载
});
});
<
/
script
>
sh这是全部代码，只需要引入js，把图片的路径换了就好了。
<SCRIPT src="js/jquery-1.11.3.js" type=text/javascript></SCRIPT>
<SCRIPT src="js/lazyload.js" type=text/javascript></SCRIPT>
这是一个默认的gif图，为了增加用户体验
下面是效果演示的一个截图
其实这个不难，主要是几个参数的设置：
1,用图片提前占位
placeholder : "img/loading.gif",
参数:placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏 ；
2,载入使用何种效果
effect : "fadeIn",
参数：effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn的效果；
3,提前开始加载
threshold : 200,
参数:threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉；
4,事件触发时才加载
event : "click",
参数:event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加；
5,对某容器中的图片实现效果
container: $("#container"),
参数:container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片 ；
6,图片排序混乱时
failurelimit : 10,
参数:failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.
由于时间有限，暂且搁笔，下次有时间再好好写写，如有什么问题，请朋友们提出宝贵意见，谢谢，一起进步！