jQuery lazyLoad圖片延遲加載插件的優化改造方法分享

2019-11-20 22:25:09

字體：大中小

來源：轉載

供稿：網友

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

假如你使用過這個插件的話，你有沒有發現，無論多大的圖片，只要你的滾動條到達那個位置的話，圖片就會很快的顯示出來，有點不可思議吧。那是因為那張圖片已經下載好了。
再者，我自己的想法，jquery的代碼是在頁面加載完成后才會執行的，那頁面加載完的時候，圖片較小的都下載完了，再執行jq代碼的話，那種意義就不存在了。

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

好吧，開始了

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

在頁面插入圖片的代碼如
<img src="http://VeVB.COm/upload/201010122047211034.jpg" alt=""/>
修改成
<img original="http://VeVB.COm/upload/201010122047211034.jpg" src="http://VeVB.COm/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://VeVB.COm/img/img_loading.gif",
effect : "fadeIn"
});
});
</script>

這樣所有圖片就都顯示img_loading.gif了,由于都是請求的同一個圖片,瀏覽器只會請求一次..對于減少服務器http請求來說,我們的目標已經達到了.當瀏覽器滾動到圖片的位置時候，就會把圖片加載進來。

上一篇：jQuery教程 $()包裝函數來實現數組元素分頁效果

下一篇：js setTimeout 參數傳遞使用介紹