经常在一些网站上见到图片都是在窗口上将要出现的时候才进行服务器请求，才进行显示。当时就想这样岂不是能在图片较多或图片较大的页面上有效的减少服务器请求和网络流量么，后来才发现原来这个就是方法叫做图片延迟加载。

现在有一个jquery的插件叫做“jquery.lazyload.js”，专门进行图片延迟加载处理,处理方法如下：

1
2
3
4
5
6
7
8
9
10
<script type= "text/javascript"  src= "jquery.lazyload.js" ></script>
<script type= "text/javascript" >
jQuery(document).ready(
function ($){
$( "img" ).lazyload({
      placeholder :  'loading.gif' ,
      effect      :  "fadeIn"
});
});
</script>

但是似乎jquery.lazyload.js有bug，但是如果使用httpwatch等网页测试工具检测页面加载你会发现，图片其实是全部加载完了。因为执行js是在页面的page_load之后。所有，jquery.lazyload.js加载出来的只是图片的缓存文件。这样不就2次访问服务器加载图片了？即使jquery.lazyload.js加载的只是缓存图片...

解决办法：在jquery.lazyload.js的62行将 $(self).attr("original", $(self).attr("img"));  修改成$(self).attr("original", $(self).attr("original"));然后读图图片的时候将img=替换成original=即可。凡客，淘宝商城都是这样的作法。这样才实现真正意义上的延迟加载。

2012-09-19,实现jquery.sd.lazyload.js插件

在参考了“jquery.lazyload.js“之后我开发了一个简化的图片延迟加载的插件，工作原理：

  1. 在新建文档是将文档中的img标签中src都替换为_src，这样做的目的是显示页面是不加载图片。

  2. 在页面上调用jquery.sd.lazyload.js插件，给每个图片绑定一个滚动事件，如果在滚动条的显示范围之内就将图片的src属性更新上_src的值，将图片实现出来，同时如果图片已经显示了就不再次显示。

  3. 在编辑文档是为了能在编辑区正常显示图片，需要将img标签的_src属性都改为src。

注意，1,3步骤都需要在服务器端完成，现在本站就是这样显示的。