jQuery lazyLoad图片延迟加载插件的优化改造方法分享

jQuery lazyLoad.js插件 是一款基于jquery框架，可以“实现”图片延迟加载的插件。请注意，我用了双引号，因为从我自己实际调试的结论来说呢，并不会延迟加载，而是先下载，然后通过改变<img>的src属性来隐藏原来的图片。
我们先来看看他的代码吧！

复制代码 代码如下:

<script type="text/javascript" src="/static/jssrc/lazyload.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#team_main_side img").lazyload({
placeholder : "/static/theme/xituan/img/img_loading.gif",
effect : "fadeIn"
});
});
</script>

修改成
<img original="http://vevb.com/upload/201010122047211034.jpg" src="http://vevb.com/img/img_loading.gif" />

最后记得插入js代码

[code]
<script type="text/javascript" src="/js/jquery.js"></script><!--jquery 包-->
<script type="text/javascript" src="/js/jquery.lazyload.js"></script><!--lazyload 插件-->
<script type="text/javascript"> //初始化代码
$(document).ready(function(){
$("#team_main_side img").lazyload({
placeholder : "http://vevb.com/img/img_loading.gif",
effect : "fadeIn"
});
});
</script>

这样所有图片就都显示img_loading.gif了,由于都是请求的同一个图片,浏览器只会请求一次..对于减少服务器http请求来说,我们的目标已经达到了.当浏览器滚动到图片的位置时候，就会把图片加载进来。