[JQuery] Lazy Load-延遲載入網頁圖片

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



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

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

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



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



lazyload下載網址:http://www.appelsiini.net/projects/lazyload



這個plugin使用的方式很簡單，將js加入網站，接著加入以下語法就可以了。

$("img").lazyload();

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

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

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

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

其他更詳細的內容請參考我的部落格finalevil's blog