lazyload.js實現圖片緩衝載入

　　Lazy Load 這個 jQuery 外掛，是用來緩衝載入圖片的外掛。如果一篇文章很長有很多圖片的話，下載圖片就需要很多時間。而這款外掛，會檢測你的滾動情況，只有你要看到那個圖片的時候，它才會從後臺請求下載圖片，然後顯示出來。使用這個外掛，可以在需要顯示圖片的時候，才下載圖片，所以可以減少伺服器的壓力，避免不必要的資源下載。如果一個人不看下面的圖片，那載入下面的圖片就是一種浪費。

　　Lazy Load 官方下載地址：http://www.appelsiini.net/lazyload

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 });