Jquery中文網 www.4271936.live
Jquery中文網 >  jQuery  >  jquery 教程  >  正文 jQuery lazyLoad圖片延遲加載插件的優化改造方法分享

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

發布時間:2014-03-07   編輯:www.4271936.live
jQuery lazyLoad.js插件 是一款基于jquery框架,可以“實現”圖片延遲加載的插件
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://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了,由于都是請求的同一個圖片,瀏覽器只會請求一次..對于減少服務器http請求來說,我們的目標已經達到了.當瀏覽器滾動到圖片的位置時候,就會把圖片加載進來。

您可能感興趣的文章:
jQuery lazyLoad圖片延遲加載插件的優化改造方法分享
使用jquery插件實現圖片延遲加載技術詳細說明
Jquery.LazyLoad.js修正版下載,實現圖片延遲加載插件
jquery.lazyload 實現圖片延遲加載jquery插件
Lazy Load 延遲加載圖片的 jQuery 插件
Lazy Load 延遲加載圖片的jQuery插件中文使用文檔
jquery lazyload延遲加載技術的實現原理分析
jquery插件lazyload.js延遲加載圖片的使用方法
jQuery lazyload 的重復加載錯誤以及修復方法
基于jquery的lazy loader插件實現圖片的延遲加載[簡單使用]

關鍵詞: 圖片延遲  lazyLoad   
[關閉]
微信下载APP完成任务如何赚钱 微乐江西麻将手机下载安装 广东麻将买马计算教程 刘伯温期期精选一肖 黑龙江11远5一定牛走势图 申城棋牌网? 西甲积分榜排名 广东麻将规则 海王2捕鱼下载安装 波克麻将怎么老是输 捕鱼达人之大圣闹海