为什么要使用图片延迟加载？首要因素就是为了加快网页的打开速度，以最短的时间打开网页展现给浏览者面前，毕竟现在人可没那么多耐心等待一个网站花费大量时间加载，如果网页 […]
为什么要使用图片延迟加载？首要因素就是为了加快网页的打开速度，以最短的时间打开网页展现给浏览者面前，毕竟现在人可没那么多耐心等待一个网站花费大量时间加载，如果网页还没打开就被浏览者关闭了，可以说是最失败的事情了。
尤其是针对图片较多的网站，一个页面充斥着大量图片，如果图片还是未经压缩过的、尺寸比较大，那打开这个页面时间很是令人崩溃的。所以图片延迟加载就很必要了，随着用户向下滚动页面，只有当图片滚动到可视视窗内，或接近可视视窗时，这个图片才会从服务器加载，只加载网页可视区域的内容，看不到的区域的图片内容不加载，这样就能节省出大量的时间。
这里我们使用到的是一个js插件：jquery.lazyload.js，需要结合jQuery使用（注意：如果提示出错，看看你的jQuery版本是不是太低了，换个高版本的jQuery再次尝试）。
引入js文件：
|
1
2
|
<script src="jquery-1.11.0.min.js"></script><script src="jquery.lazyload.js"></script> |
在HTML中正常图片代码如下：
<img src="images/picture.jpg" alt="图片延迟加载" />
想给图片加上延迟加载特效，只需要做如下修改：
|
1
|
<img class="lazy" data-original="images/picture.jpg" alt="图片延迟加载" /> |
最后再引入初始化js代码：
|
1
2
3
4
5
|
<script type="text/javascript" charset="utf-8"> $(function() { $("img.lazy").lazyload({effect: "fadeIn"}); });</script> |
代码说明：我们为每个img标签中加上类class="lazy"标志，然后将src改成data-original；当初始化js代码加载后，图片进入网页可视区域后，js代码会找到所有带有类lazy标志的img标签，然后再将data-original中的数据即图片路径写入img标签，这样一张图片就会显示出来。出于优化考虑，为img标签加上alt属性，告知搜索引擎这是一张什么图片。
当然，为了省事也可以去掉img标签中的class="lazy"，此时需要你修改对应的初始化代码：
|
1
|
$("img").lazyload({effect: "fadeIn"}); |
上面代码会将该页面中所有img标签获取到，然后进行延迟加载操作。
note：如果想提前载入图片，比如在距可视区域100px前就开始加载数据，初始化代码需要写成下面这样：
|
1
|
$("img.lazy").lazyload({ threshold :180}); |
layzload相关参数如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
$("img.lazy").lazyload({ placeholder : "img/grey.gif", //用图片提前占位 // placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏 effect: "fadeIn", // 载入使用何种效果 // effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn threshold: 200, // 提前开始加载 // threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉 event: 'click', // 事件触发时才加载 // event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试… container: $("#container"), // 对某容器中的图片实现效果 // container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片 failurelimit : 10 // 图片排序混乱时 // failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.}); |
为背景图片添加延迟加载特效：
不要以为lazyload只能给img图片标签添加延迟加载特效，同样可以在背景图片上使用，二者使用方法很类似：
HTML代码：
|
1
|
<div class="lazy" data-original="img/pic.jpg" width="660" height="550"></div> |
js代码：
|
1
2
3
|
$(function() { $("div.lazy").lazyload();}); |
上面代码就实现了给div标签背景图片添加延迟加载特效的功能。
可能你会问如果我要给span、li等其他标签添加呢？其实很简单，看下代码就能明白：
|
1
2
3
4
|
<div class="lazy" data-original="img/pic.jpg" width="660" height="550"></div><span class="lazy" data-original="img/pic.jpg" width="660" height="550"></span><p class="lazy" data-original="img/pic.jpg" width="660" height="550"></p><li class="lazy" data-original="img/pic.jpg" width="660" height="550"></li> |
对应js也要添加些代码：
|
1
2
3
4
5
6
|
$(function() { $("div.lazy").lazyload(); $("span.lazy").lazyload(); $("p.lazy").lazyload(); $("li.lazy").lazyload();}); |
也就是说，只要添加了对应标记，而且告诉lazyload()加载这个标签标记才会起作用。
