为什么要使用图片延迟加载？首要因素就是为了加快网页的打开速度，以最短的时间打开网页展现给浏览者面前，毕竟现在人可没那么多耐心等待一个网站花费大量时间加载，如果网页 […]

为什么要使用图片延迟加载？首要因素就是为了加快网页的打开速度，以最短的时间打开网页展现给浏览者面前，毕竟现在人可没那么多耐心等待一个网站花费大量时间加载，如果网页还没打开就被浏览者关闭了，可以说是最失败的事情了。

尤其是针对图片较多的网站，一个页面充斥着大量图片，如果图片还是未经压缩过的、尺寸比较大，那打开这个页面时间很是令人崩溃的。所以图片延迟加载就很必要了，随着用户向下滚动页面，只有当图片滚动到可视视窗内，或接近可视视窗时，这个图片才会从服务器加载，只加载网页可视区域的内容，看不到的区域的图片内容不加载，这样就能节省出大量的时间。

这里我们使用到的是一个js插件：jquery.lazyload.js，需要结合jQuery使用（注意：如果提示出错，看看你的jQuery版本是不是太低了，换个高版本的jQuery再次尝试）。

引入js文件：

12<scriptsrc="jquery-1.11.0.min.js"></script><scriptsrc="jquery.lazyload.js"></script>

在HTML中正常图片代码如下：

<img src="images/picture.jpg" alt="图片延迟加载" />

想给图片加上延迟加载特效，只需要做如下修改：

1<imgclass="lazy"data-original="images/picture.jpg"alt="图片延迟加载"/>

最后再引入初始化js代码：

12345<scripttype="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相关参数如下：

1234567891011121314$("img.lazy").lazyload({placeholder:"img/grey.gif",//用图片提前占位//placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏effect:"fadeIn",//载入使用何种效果//effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeInthreshold:200,//提前开始加载//threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉event:'click',//事件触发时才加载//event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…container:$("#container"),//对某容器中的图片实现效果//container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片failurelimit:10//图片排序混乱时//failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.});

为背景图片添加延迟加载特效：