jquery lazyload 延迟加载
现在淘宝，新浪等大网站，大量的图片都是在拉动滚动条的时候才加载，这样不但提高了用户体验，减少页面加载时间，同时也减少了不少htttp请求，减少了服务器的压力。最近研究了下，发现是利用imagelazyload技术来实现图片的延迟加载，ImageLazyLoad技术就是，当前可见界面的图片是加载进来的，而不可见页面（通过滚动条下拉可见）中的图片是不加载的，这样势必会引起速度上质的提升。
从网上找了些资料，发现利用jquery的jquery.lazyload插件可以实现图片的延迟加载，所以就研究了翻，可是通过firefox的firebug的检测，插件并不想象的那样，当拉动滚动条的时候图片才加载，而是页面加载时，所有图片都加载了，只是没有显示罢了，为了弄明白，特此下了个jquery.lazyload来做个小实验。
下面是firebug检测结果http://blog.phpchina.com/data/attachments/2011/1/12/20110112224343_27529.jpg
通过firebug我们发现，在页面加载的时候，所有图片都向服务器发出了请求，当拉动滚动条时，都又向服务器发出了请求，
这并不是我们想要的结果，不但没有减少服务器压力，反而增加了服务器请求。
上网查资料，通过一些网友的资料，终于弄懂了怎么回事，研究了下jquery.lazyload插件的源码。
jquery.lazyload插件是通过将不需要加载的img的src值暂时存在original中，阻止img标签向服务器发送http请求，当需要加载的时候，再将original中的保存的src值附回去。就像上面图中，一些图片向服务器中发送的请求，但没有成功。当加载页面时，img向服务器发送请求的同时src值被改变，所以没有成功。
为了实现我们想要的目的，只有改一下jquery.lazyload插件了
先把蓝色背景的代码注掉
http://blog.phpchina.com/data/attachments/2011/1/12/20110112224418_83203.jpg
然后 在加上下面蓝色背景的代码
http://blog.phpchina.com/data/attachments/2011/1/12/20110112224430_46115.jpg
下面是html代码 将img的加个 original 把原来src的值给它，src可以给它个一个像素的小图片，防止加载的时候出现红色叉，也可以给它个gif动画
http://blog.phpchina.com/data/attachments/2011/1/12/20110112224444_30575.jpg
下面是javascript代码
http://blog.phpchina.com/data/attachments/2011/1/12/20110112224301_87430.jpg
页:
[1]