做为一名站长，由于网站的图片加载速度慢，而影响用户体验度的问题不可避免，所以今天春哥就给大家分享一个图片延迟加载的插件。

我们这里要用到的是一款名叫lazyload的插件。lazyload是一个用JavaScript编写的基于JQuery的插件。它可以延迟加载长页面中的图片，从而提升用户体验度！

图片异步加载，就是指在浏览器可视区域外的图片不会被载入，直到用户将页面滚动到它所在的位置的时候才加载显示。在包含很多大图片长页面中延迟加载图片可以加快页面加载速度。浏览器将会在加载可见图片之后即进入就绪状态

Lazy Load 依赖于 jQuery，请将下列代码加入页面head区域：

<script src="jquery.js" type="text/javascript"></script>

<script src="jquery.lazyload.js" type="text/javascript"></script>

上述用到的jquery.js和jquery.lazyload.js请自行搜索下载。

然后在页面底部插入下面的JavaScript代码：

<script type="text/javascript">

$(function(){

$("img").lazyload({

placeholder:"lazy.gif", //加载图片前的占位图片

effect:"fadeIn" //加载图片时的效果（淡入），show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn

})

})

</script>

然后附一个加载图片前的占位图给大家

当然一个完美的插件参数不可能就只有这两个，还有如下几个可选参数

placeholder : "img/grey.gif", //用图片提前占位

effect : "fadeIn", //载入使用何种效果,effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn

threshold : 200, //提前开始加载

event : "click", //事件触发时才加载,event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标划过或点击图片才开始加载,后两个值未测试…

failurelimit : 10, //图片排序混乱时 ,failurelimit,值为数字.

通过以上几步，就能简单实现网页图片异步延时加载了。