jQuery lazyLoad图片延时加载插件优化转换方法分享

jquery lazyLoad.js插件是基于jquery框架的插件，可以“实现”图片的延迟加载。请注意我用的是双引号，因为从我自己的实际调试结论来看，我不会延迟加载，而是先下载，然后通过改变img的src属性来隐藏原图。先看看他的代码吧！复制的代码如下： script type=' text/JavaScript ' src=' http :/static/js src/lazy load . js '/script type=' text/JavaScript ' $(文档)。ready(function(){ $(' # team _ main _ side img ')。lazy load({ placeholder : '/static/theme/xituan/img/img _ loading . gif '，effect : ' fadeIn ' })；});/script的工作原理是在img下创建原始属性，将src属性值赋给original，然后将src值修改为您设置的占位符值。当滚动条到达图片位置时，将original的属性分配给src。此时向服务器发送一个HTTP请求，确认是否有修改，服务器返回状态304，等于HTTP请求一次可以完成的工作。用了两次，不仅没有减少开支，反而增加了开支。我彻底无语了。(如下图，火狐的firebug显示)。

如果你用过这个插件，有没有注意到，不管图片有多大，只要你的滚动条到达那个位置，图片就会很快显示出来，这有点不可思议？那是因为那张图片已经被下载了。此外，在我看来，jquery的代码在页面加载之前不会被执行。加载页面后，所有较小的图片都已下载。如果jq代码被再次执行，这个意义就不存在了。这个问题必须解决，改变这个插件的代码。好了，开始打开这个jquery.lazyLoad.js，找到如下图第一个红框中的代码，直接注释掉；第二个红框需要手动添加，然后保存。

在页面上插入图片的代码，如img src=' http:http://jb51.net/upload/201010122047211034.jpg' alt=' '/，修改为img original=' 3358jb51.net/upload/21010122047211034 . jpg ' src=' http:http://jb51.net/img/img _ loading . gif ' alt=' '/最后，记得插入js code[code]script type=' text/JavaScript ' src=' http :/js/j-jquery package-script type=' text/JavaScript ' src=' http3- lazyload插件脚本类型=' text/JavaScript '//初始化代码$(文档)。ready(function(){ $(' # team _ main _ side img '))。lazy load({ placeholder : ' http://JB 51 . net/img/img _ loading . gif '，effect : ' FAdein ' })；});/script以便所有图片都以img_loading.gif显示由于它们都是请求的相同图片，浏览器将只请求一次.为了减少来自服务器的http请求，我们的目标已经达到。当浏览器滚动到图片的位置时，会加载图片。