緩衝加載圖片的 jQuery 插件 lazyload.js 使用方法詳解

Lazy Load 這個 jQuery 插件，是用來緩衝加載圖片的插件。若是一篇文章很長有不少圖片的話，下載圖片就須要不少時間。而這款插件，會檢測你的滾動狀況，只有你要看到那個圖片的時 候，它纔會從後臺請求下載圖片，而後顯示出來。使用這個插件，能夠在須要顯示圖片的時候，才下載圖片，因此能夠減小服務器的壓力，避免沒必要要的資源下載。 若是一我的不看下面的圖片，那加載下面的圖片就是一種浪費。

Lazy Load 插件原理

修改目標 img 的 src 屬性爲 orginal 屬性，從而中斷圖片的加載。檢測滾動狀態，而後把可視網頁中的 img 的 src 屬性還原加載圖片，製造緩衝加載的效果。

可是如今，不少javascript大牛分析得出，這個插件其實並無真正的緩加載效果。確實是這樣，官方也已經給出了說明和解決方法了。

問題緣由：在新版的瀏覽器中，即便你刪除了 Javascript 控制的 src 屬性，瀏覽器仍然會去加載這個圖像。

解決方法：直接修改 HTML 的結構，在 img 標籤中添加新的屬性，把 src 屬性的值指向佔位圖片，添加 data-original 屬性，讓其指向真正的圖像地址。

例如：

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

 

這樣咱們就須要先分析一下插件的優缺點，再決定是否要使用。

使用：

1. 必須按照這種結構纔有實際做用，須要對輸出進行定義。
2. 能夠節約服務器資源，而且有較好的用戶體驗。
3. 若是圖片很大，當用戶滾動到目標位置，須要較長時間下載。

不使用：

1. 增長服務器壓力，浪費系統資源。

究竟使用不使用，仍是要看你本身的實際需求。若是你圖片比較少，就沒必要使用了，若是你圖片比較多，能夠考慮一下。可是，使用的話，你可能須要把每一 個img 標籤上本身加上這個屬性，會稍微麻煩一點。潛行者m博客上，就用了這個插件，不過沒用使用官方說的那種結構，要的只是一個緩衝加載的效果。

 

開始使用 lazyload.js

第一步：加載相關文件。

很明顯，你要加載jquery和這個插件。你可使用如下代碼，加載這幾個文件：

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

 

第二步：定義圖片結構。

按照官方的建議，定義你的img結構：

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

 

第三步：觸發這個插件，生效。

激活如下，你就能夠在目標中使用了。

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

 

lazyload.js 高級使用方法：

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

更周全的作法

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

應對這個問題，咱們須要引入 noscript 標籤。大致思路以下：用 noscript 包含真實的圖像位置，當瀏覽器不支持 Javascript，直接顯示圖像。對現有圖像，隱藏處理，使用 show() 方法觸發顯示。這樣，若是瀏覽器不支持 Javascript，咱們自定義的 img 就不會出現，而顯示 noscript 裏面的圖像。具體實現代碼以下：

<img src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480"> 
<noscript><img src="img/example.jpg" width="640" heigh="480"></noscript>
<script type="text/javascript"></script>$("img.lazy").show().lazyload();</script>

 

提早加載

默認的狀況是，當你滾動到圖片位置的時候，插件開始加載。這樣，用戶可能首先看到的是一個空白圖像，而後再緩慢出現。若是你想在用戶滾動以前，提早加載這個圖像，你能夠配置一下參數。

$("img.lazy").lazyload({ threshold : 200 });

 

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

自定義觸發事件

默認的觸發事件，是滾動，當你滾動的時候，就會檢查而後加載。你可使用event屬性，設置你本身的加載事件，以後你能夠自定義觸發這個事件的條件，而後去加載圖像。

$("img.lazy").lazyload({ event : "click" });

 

自定義顯示效果

默認的圖片實現效果，就是沒有效果，下載完成以後，直接顯示出來。這樣的用戶體驗並很差，你能夠設置 effect 屬性，來控制顯示圖片的效果。例如

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

 

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

把圖像插入某個容器

你們若是使用智能手機的話，常常去應用網站下載應用，他們一般使用一個橫着的容器，放一些手機截圖。使用 container 屬性，能很輕鬆在容器中實現緩衝加載。首先，咱們須要用css定義這個容器，而後用這個插件進行加載。效果： vertical

#container { height: 600px; overflow: scroll; }
$("img.lazy").lazyload({         
     container: $("#container")
});

 

加載不可見圖像

有部分圖像是不可見的，咱們對其加上相似 display：none 等屬性的圖像。默認的狀況下，這個插件是不會加載隱藏的不可見圖像。若是咱們須要用它加載不可見圖像，咱們須要將 skip_invisible 設置爲 false

$("img.lazy").lazyload({ skip_invisible : false });