jquery外掛程式lazyload.js消極式載入圖片的使用方法

jquery外掛程式lazyload.js消極式載入圖片的使用方法

 lazyload.js是一個基於JQuery的外掛程式，可以用來緩衝載入圖片。下面介紹這個外掛程式的使用方法

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

 

Lazy Load 外掛程式原理

 

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

 

代碼如下:

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

<script type="text/javascript" src="js/jquery.lazyload.js"></script>

<script type="text/javascript">

    $(document).ready(

    function($){

    $("img").lazyload({

         placeholder : "images/grey.gif", //載入圖片前的佔位圖片

         effect      : "fadeIn" //載入圖片使用的效果(淡入)

    });

    });

</script>

 

 

但是現在，很多Javascript大牛分析得出，這個外掛程式其實並沒有真正的起到緩載入的作用。確實是這樣，官方也已經給出了說明和解決方案了。

 

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

 

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

 

 代碼如下:

<img src="img/grey.gif" data-original="img/example.jpg" >

 

 

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

 

如只緩衝載入類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，直接顯示映像。

 

 代碼如下:

<img class="lazy" src="img/grey.gif" data-original="img/example.jpg"  width="640" heigh="480">

<noscript><img src="img/example.jpg" width="640" heigh="480"></noscript>

 

 

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

 

代碼如下:

.lazy {

  display: none;

}

 

 

這樣，如果瀏覽器不支援 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: 600px; overflow: scroll; }

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

    container: $("#container")

});

 

 

載入不可見映像

 

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

 

 

複製代碼 代碼如下:

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

    skip_invisible : false

});

 

 

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