分類  >  Web前端 >

應用jQuery插件實現圖片延遲載入以及對SEO的影響

tags:    時間:2013-12-10 08:06:03
使用jQuery插件實現圖片延遲載入以及對SEO的影響

  最近忙著給自己的博客優化,想把圖片的顯示改成延遲載入顯示,也就是像很多網站那樣,當前可視區域的圖片載入實現,不可見的區域圖片不載入,這 樣可以減少網路流量。我找到了Lazy Load 這個用 JavaScript 編寫的 jQuery 插件,它可以延遲載入長頁面中的圖片。在瀏覽器可視區域外的圖片不會被載入,直到用戶將頁面滾動到它們所在的位置,這與圖片預載入的處理方式正好是相反 的。

  經過我的一番嘗試,這個jQuery LazyLoad圖片延遲載入插件已經成功的應用到了我的獨立博客(www.vktone.com)上了,下面就來分享一下怎麼使用這個jQuery LazyLoad圖片延遲載入插件。(官網地址:http://www.appelsiini.net/projects/lazyload)

  第一步:下載js腳本,最好放到你網站的js存儲目錄。

  https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js

  第二步:在html中引用此js腳本,當然也需要jQuery腳本。放在body結束之前最好。

<script type="text/javascript" src="http://files.vktone.com/js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="http://files.vktone.com/js/jquery.lazyload.min.js"></script>

  第三步:修改html圖片標籤<img />的寫法。

原來的寫法: <img src="img/example.jpg"  width="640" heigh="480">
修改之後的寫法: <img class="lazy" src="img/grey.gif" data-original="img/example.jpg"  width="640" heigh="480">

  要點:src改成一個佔位符圖片,比如:img/grey.gif,將原來的src放到data-original屬性中。為圖片<img/>加個class,方面css控制和js腳本訪問。

  第四步:調用lazyload插件方法,讓延遲載入生效。

<script type="text/javascript"> //<![CDATA[ $(function(){ 	$("img.lazy").lazyload({ 		effect       : "fadeIn" 	}); }); //]]> </script>  

  關於使用jQuery LazyLoad插件實現圖片延遲載入的幾點考慮:

  第一,對於動態生成的頁面或者靜態化的頁面需要做些處理,工作量還是有一些的;

  第二,占點陣圖片也可以設置的有點特色,比如我的博客設置的是:http://files.vktone.com/vktone.gif
  第三,還可以結合<noscript/>標籤,保證不支持js腳本的瀏覽器也能顯示。

  第四,影響到網站圖片的收錄。因為這樣修改了之後,像百度谷歌之類的搜索引擎來爬頁面的時候,圖片的地址其實就不對了(都是佔位符圖片)。

  第五,可以在<noscript/>標籤中把真正的圖片地址輸出,可能會保證搜索引擎正常收錄,不過這只是我的想法,至於搜索引擎會不會正常收錄還有待檢驗。

  比如,我的博客是這樣寫的:

<img  alt="李鳴工筆人物畫欣賞" class="lazy" src="http://files.vktone.com/vktone.gif" data-original="http://files.vktone.com/files/artres/20130117101900746100_28147497688552181.jpg" /> <noscript><img  alt="李鳴工筆人物畫欣賞" src="http://files.vktone.com/files/artres/20130117101900746100_28147497688552181.jpg" /></noscript>

  另外,加入圖片延遲載入效果之後,對於圖片載入完后處理的腳本執行會產生影響,比如我想在圖片載入完之後放縮圖片以調整到適合的寬度,腳本可能就不會執行,最後用了一個定時器來執行這樣的處理。比如:resizeImageToFitWidth方法用來調整圖片大小,所以我每隔半秒就執行一次,因為無法確定什麼時候圖片會被載入完,而不使用延遲載入效果的就不會有這樣的問題。

window.setInterval(resizeImageToFitWidth, 500);

  根據別人的經驗和我的測試,圖片最好指定大小,如果沒有height屬性可能延遲載入效果不是特別好。

  關於SEO(搜索引擎收錄圖片)的測試結果總結(2012-01-31)

  ...

 

 

  • 源文【使用jQuery LazyLoad插件實現圖片延遲載入】最新版,請訪問:
       http://www.vktone.com/articles/lazy-load-images-use-jquery-lazyload-plugin.html

 

1 樓 馮程程 前天  
我網站也是用這個載入圖片,挺喜歡你上面的美女圖片的,來加個友情鏈接三;
http://www.food028.com

推薦閱讀文章

Bookmark the permalink ,來源:互聯網