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



工作原理是先在<img>下創(chuàng)建original屬性，并把src屬性值賦值給original，然后再把src的值修改成你設(shè)置的 placeholder的值。當(dāng)滾動(dòng)條到達(dá)圖片位置時(shí)，再把original的屬性賦值給src。這個(gè)時(shí)候向服務(wù)器發(fā)出一個(gè)HTTP請求，確認(rèn)下有沒有修 改，服務(wù)器返回一個(gè)304狀態(tài)，等于本來一遍HTTP請求能完成的工作，它用了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><!--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://jb51.net/img/img_loading.gif",
effect : "fadeIn"
});
});
</script>

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