快捷導(dǎo)航

jQuery lazyLoad圖片延遲加載插件的優(yōu)化改造方法分享

更新時(shí)間：2013年08月13日 11:32:55 作者：

jQuery lazyLoad.js插件是一款基于jquery框架，可以“實(shí)現(xiàn)”圖片延遲加載的插件

jQuery lazyLoad.js插件是一款基于jquery框架，可以“實(shí)現(xiàn)”圖片延遲加載的插件。請(qǐng)注意，我用了雙引號(hào)，因?yàn)閺奈易约簩?shí)際調(diào)試的結(jié)論來說呢，并不會(huì)延遲加載，而是先下載，然后通過改變<img>的src屬性來隱藏原來的圖片。
我們先來看看他的代碼吧！

復(fù)制代碼代碼如下:

 
<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>下創(chuàng)建original屬性，并把src屬性值賦值給original，然后再把src的值修改成你設(shè)置的 placeholder的值。當(dāng)滾動(dòng)條到達(dá)圖片位置時(shí)，再把original的屬性賦值給src。這個(gè)時(shí)候向服務(wù)器發(fā)出一個(gè)HTTP請(qǐng)求，確認(rèn)下有沒有修改，服務(wù)器返回一個(gè)304狀態(tài)，等于本來一遍HTTP請(qǐng)求能完成的工作，它用了2遍，非但沒有減少開支，還增加開銷，我徹底無語了。(如下圖,火狐的firebug顯示)

假如你使用過這個(gè)插件的話，你有沒有發(fā)現(xiàn)，無論多大的圖片，只要你的滾動(dòng)條到達(dá)那個(gè)位置的話，圖片就會(huì)很快的顯示出來，有點(diǎn)不可思議吧。那是因?yàn)槟菑垐D片已經(jīng)下載好了。
再者，我自己的想法，jquery的代碼是在頁面加載完成后才會(huì)執(zhí)行的，那頁面加載完的時(shí)候，圖片較小的都下載完了，再執(zhí)行jq代碼的話，那種意義就不存在了。

那有問題肯定要解決，把這個(gè)插件的代碼改一改。

好吧，開始了

打開這個(gè)jquery.lazyLoad.js,找到如下圖第一個(gè)紅框的代碼，直接注釋掉；第二個(gè)紅框是需要自己手工添加上去的，然后保存。

在頁面插入圖片的代碼如
<img src="http://jb51.net/upload/201010122047211034.jpg" alt=""/>
修改成
<img original="http://jb51.net/upload/201010122047211034.jpg" src="http://jb51.net/img/img_loading.gif" alt=""/>

最后記得插入js代碼

[code]
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.lazyload.js"></script>
<script type="text/javascript"> //初始化代碼
$(document).ready(function(){
$("#team_main_side img").lazyload({
placeholder : "http://jb51.net/img/img_loading.gif",
effect : "fadeIn"
});
});
</script>

這樣所有圖片就都顯示img_loading.gif了,由于都是請(qǐng)求的同一個(gè)圖片,瀏覽器只會(huì)請(qǐng)求一次..對(duì)于減少服務(wù)器http請(qǐng)求來說,我們的目標(biāo)已經(jīng)達(dá)到了.當(dāng)瀏覽器滾動(dòng)到圖片的位置時(shí)候，就會(huì)把圖片加載進(jìn)來。

您可能感興趣的文章: