jquery外掛程式lazyload.js延遲載入圖片的使用方法_jquery

如果一個網頁很長並且有很多圖片的話，下載圖片就需要很多時間，那麼就會影響整個網頁的加載速度，而這款延遲加載插件，會通過你的滾動情況來加載你需要看的圖片，然後它才會從後台請求下載圖片，最後顯示出來。透過這個插件，可以在需要顯示圖片的時候，才下載圖片，從而可以減少伺服器的壓力，提高頁面載入速度。

Lazy Load 插件原理

修改目標img元素的src屬性為orginal屬性，從而中斷圖片的載入。偵測滾動狀態，然後把網頁視覺區域中的img的src屬性還原然後載入圖片，從而製造了一種緩衝載入的效果。程式碼引入方法：

複製程式碼 程式碼如下:

其實原因就在於在新版的瀏覽器中，即使我們刪除了Javascript控制的src屬性，瀏覽器還是會去載入這個圖片。

那我們該怎麼解決呢？其實也很簡單，需要直接修改HTML的結構，在img標籤中加入新的屬性，把src屬性的值指向佔位圖片，加入data-original屬性，讓其指向真正的圖像位址。如：

複製程式碼

程式碼如下:

當然，在上面的程式碼中我們把頁面內的所有圖片都延遲加載了，但有些時候我們並不希望這樣，因為有些圖片並不想然他們延遲加載，那麼我們可以這樣只需做：

如只緩衝載入類別main下的映像

複製程式碼

程式碼如下:$(".main img").lazyload({      placeholder : "images/grey.gif",

     effect      : "fadeIn"

});




載入掛載有lazy類別的圖片：

複製程式碼 程式碼如下:$("img.lazy").lazyload({

     placeholder : "images/grey.gif",

     effect      : "fadeIn"
});

其他的以此類推，適當做一下選擇器調整就行了。

lazyload.js 進階使用方法：

下面部分來自官方文檔，將官方文檔進行了一下簡單的翻譯。

更周全的做法

我們不得不思考這樣一個問題。我們定義了這樣一個結構，那麼網頁中，就不會載入來源圖像了。只有當 Javascript 執行，才會顯示這個來源圖像。如果使用者的瀏覽器不支援或使用者關掉了支援 Javascript 的選項，那麼我們的這個圖像就無法顯示出來。也就是說，如果沒有 Javascript 的支持，我們的圖像就無法顯示出來。

應對這個問題，我們需要引入noscript 標籤。大致思路如下：用 noscript 包含真實的圖像位置，當瀏覽器不支援 Javascript，直接顯示圖像。

複製程式碼 程式碼如下:

對現有影像，隱藏處理，使用 show()方法觸發顯示。

複製程式碼 程式碼如下:

.lazy { >}

這樣，如果瀏覽器不支援 Javascript，我們自訂的 img 就不會出現，而顯示 noscript 裡面的圖片。具體實作程式碼如下：

複製程式碼 程式碼如下:

$("img.lazy").show() .lazyload();

提前加載

預設的情況是，當你捲動到圖片位置的時候，插件開始載入。這樣，使用者可能首先看到的是一個空白圖像，然後再緩慢出現。如果你想在用戶滾動之前，提前加載這個圖像，你可以配置參數。

複製程式碼 程式碼如下:

$("img.lazy").lazyload({

    threshold : 200
});

threshold 這個參數，就是用來提前載入的。上面這個語句的意思是，當距離圖片還有200像素的時候，就開始載入圖片。

自訂觸發事件

預設的觸發事件，是滾動，當你滾動的時候，就會檢查然後加載。你可以使用event屬性，設定你自己的載入事件，之後你可以自訂觸發這個事件的條件，然後去載入圖片。

複製程式碼 程式碼如下:

$("img.lazy").lazyload({

    event : "click"
});

自訂顯示效果

預設的圖片實現效果，就是沒有效果，下載完成之後，直接顯示出來。這樣的使用者體驗並不好，你可以設定effect屬性，控制顯示圖片的效果。例如

複製程式碼 程式碼如下:

$("img.lazy").lazyload({

    effect : "fadeIn"
});

fadeIn的效果就是，改變圖片的透明度，漸現的方式出現。

把影像插入某個容器

大家如果使用智慧型手機的話，常常去應用網站下載應用，他們通常使用一個橫著的容器，放一些手機截圖。使用container屬性，能輕鬆在容器中實作緩衝載入。首先，我們要用css定義這個容器，然後用這個插件來載入。

複製程式碼 程式碼如下:

#container { height: 600proll;

$("img.lazy").lazyload({
    container: $("#container")
});

載入不可見圖片

有部分圖像是不可見的，我們對其加上類似 display:none;等屬性的圖像。預設的情況下，這個插件是不會載入隱藏的不可見圖像。如果我們需要用它來載入不可見圖像，我們需要將skip_invisible設定為false，程式碼如下：

複製程式碼 程式碼如下:

$("img.lazy").lazyload({

    skip_invisible : false
});

好了，這就是lazyload.js這款外掛的簡單介紹了。