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插件lazyload.js延遲加載圖片的使用方法
基于jquery的simpleValidate簡易驗證插件
JQuery插件fancybox無法在彈出層使用左右鍵的解決辦法
Jquery uploadify圖片上傳插件無法上傳的解決方法
jquery實現鼠標拖動圖片效果示例代碼
用jquery等比例控制圖片寬高的具體實現
jquery 頁面滾動到底部自動加載插件集合
為開發者準備的10款最好的jQuery日歷插件
網頁前端優化之滾動延時加載圖片示例

關鍵詞: 圖片延遲  lazyLoad   
[關閉]
微信下载APP完成任务如何赚钱 河北快3开奖结果全部 五分彩不给提现怎么办 炒股流程 博股金来配资 江苏11选五100开奖走势图 江苏快三app下载 2020好股票推荐 股票融资余额什么意思 吉林十一选五必出 时时彩计划稳定版app下载