Lazy Load-延遲載入網頁圖片

lazyload  

這個外掛用來「延遲載入圖片」,也就是說當網頁開啟以後,僅載入視線所及的範圍內的圖片,在畫面以外的圖片先暫時不載入,當捲動捲軸看到圖片所在的位置時,才開始載入那張圖片。

這樣做對於網頁使用者的好處是:

(1)當網站要顯示的圖片過多的時候不會造成資料擁擠,也不會使你家的網路塞車,造成有些圖片無法顯示必須重新按下F5重新載入的窘境。

(2)對於開發者而言,也可以避免一瞬間的流量暴衝,而導致伺服器無法負荷。

光是這兩個優點利多(最近看股票看太多的後遺症XD),我就會建議大家沒事的時候為你的網站加上這個外掛。  

lazyload:http://www.appelsiini.net/projects/lazyload  

Demo:http://www.appelsiini.net/projects/lazyload/enabled_fadein.html

ps:使用的時候記得要有jQuery,這個plugin使用的方式很簡單,將js加入網站,接著加入以下語法就可以了。  

$("img").lazyload();

如果想用fadeIn特效來顯示圖片也可以加上一些設定參數,如下:

$("img").lazyload( { effect : "fadeIn" } );

事實上lazyload預設的特效是show,也就是沒有特效直接顯示,作者也沒有特別說明還可以使用哪些特效,但是你可以透過jQuery文件找到其他特效的名稱,像是slideDown、slideUp等當作輸入參數,如下:

$("img").lazyload( { effect : "slideDown" } );

 

原文:http://blog.finalevil.com/2009/10/jquery01lazy-load.html