【jQuery】Lazyload – 延遲圖片載入

在攝影類的網站通常會放很多的圖片，當訪客瀏覽這類網站時就要開啟蠻久的，因為要載入很多的照片，這對於網站主機的流量影響蠻大的，而且會造成訪客瀏覽時的CPU Time增加很多，在這裡要介紹一套叫做Lazyload的jQuery插件，它可以延遲圖片的載入，也就是說當你進入到一個網站時，並不會一次載入所有的圖片，而是只載入一部分的圖，當你拉動瀏覽器的捲軸時，它會載入「你正在看的區塊的圖片」，所以網頁的載入速度就會變得比較快

Lazyload資訊：

• 需搭配jQuery使用
• 瀏覽器需要開啟Javascript
• 範例檔：Box.net｜4Shared｜Google ｜Dropbox

要下載lazyload.js的朋友請下載範例檔，裡面就有lazyload.js了～

常用語法：

1.載入lazyload功能：

$("img").lazyload();

2.設定延遲載入時間

$("img").lazyload({ threshold : 200 });
//200請改成你的延遲值(毫秒)

3.設定圖片未載入前的背景圖

$("img").lazyload({ placeholder : "圖片路徑" });

如果要一次使用多個參數，可以用逗號把參數隔開，例如同時使用延遲載入及背景圖：

$("img").lazyload({ placeholder : "img/grey.gif",threshold:200 });