jQuery插件Lazy Load.js，是用來緩沖加載圖片的。如果一(yī)個網頁内容很長有很多圖片的話(huà)，下(xià)載圖片就需要很多時間。而這款插件，會檢測你的滾動情況，隻有你要看到那個圖片的時候，它才會從請求下(xià)載圖片，然後顯示出來。應用了這個插件，可以在需要顯示圖片的時候，才下(xià)載圖片，所以可以減少服務器的壓力，避免不必要的資(zī)源下(xià)載。如果一(yī)個人不看下(xià)面的圖片，那加載下(xià)面的圖片就是一(yī)種浪費(fèi)。

Lazy Load 插件原理

修改目标 img 的 src 屬性爲 orginal 屬性，從而中(zhōng)斷圖片的加載。檢測滾動狀态，然後把可視網頁中(zhōng)的 img 的 src 屬性還原加載圖片，制造緩沖加載的效果。

但是現在，很多javascript大(dà)牛分(fēn)析得出，這個插件其實并沒有真正的緩加載效果。确實是這樣，官方也已經給出了說明和解決方法了。

問題原因：在新版的浏覽器中(zhōng)，即使你删除了 Javascript 控制的 src 屬性，浏覽器仍然會去(qù)加載這個圖像。

解決方法：直接修改 HTML 的結構，在 img 标簽中(zhōng)添加新的屬性，把 src 屬性的值指向占位圖片，添加 data-original 屬性，讓其指向真正的圖像地址。

例如：

這樣就需要先分(fēn)析一(yī)下(xià)插件的優缺點，再決定是否要使用。

使用：

1.必須按照這種結構才有實際作用，需要對輸出進行定義。

2.可以節約服務器資(zī)源，并且有較好的用戶體(tǐ)驗。

3.如果圖片很大(dà)，當用戶滾動到目标位置，需要較長時間下(xià)載。

不使用：

1.增加服務器壓力，浪費(fèi)系統資(zī)源。

究竟使用不使用，還是要看你自己的實際需求。如果你圖片比較少，就不必使用了，如果你圖片比較多，可以考慮一(yī)下(xià)。但是，使用的話(huà)，你可能需要把每一(yī) 個img 标簽上自己加上這個屬性，會稍微麻煩一(yī)點。jeson的博客上，就用了這個插件，不過沒用使用官方說的那種結構，要的隻是一(yī)個緩沖加載的效果。

開(kāi)始使用 lazyload.js

第一(yī)步：加載相關文件。

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

第二步：定義圖片結構。

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

第三步：觸發這個插件，生(shēng)效。

激活以下(xià)，你就可以在目标中(zhōng)使用了。

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

lazyload.js 高級使用方法：

下(xià)面部分(fēn)來自官方文檔，将官方文檔進行了一(yī)下(xià)簡單的翻譯。

更周全的做法

大(dà)家不得不思考這樣一(yī)個問題。我(wǒ)們定義了這樣一(yī)個結構，那麽網頁中(zhōng)，就不會加載源圖像了。隻有當 Javascript 執行，才會顯示這個源圖像。如果用戶的浏覽器不支持或者用戶關掉了支持 Javascript 的選項，那麽我(wǒ)們的這個圖像就無法顯示出來。也就是說，如果沒有 Javascript 的支持，我(wǒ)們的圖像就無法顯示出來。

應對這個問題，我(wǒ)們需要引入noscript 标簽。大(dà)體(tǐ)思路如下(xià)：用 noscript 包含真實的圖像位置，當浏覽器不支持 Javascript，直接顯示圖像。對現有圖像，隐藏處理，使用 show()方法觸發顯示。這樣，如果浏覽器不支持 Javascript，我(wǒ)們自定義的 img 就不會出現，而顯示 noscript 裏面的圖像。具體(tǐ)實現代碼如下(xià)：

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

提前加載

默認的情況是，當浏覽器滾動到圖片位置的時候，插件開(kāi)始加載。這樣，用戶可能首先看到的是一(yī)個空白(bái)圖像，然後再緩慢(màn)出現。如果你想在用戶滾動之前，提前加載這個圖像，你可以配置一(yī)下(xià)參數。

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

threshold 這個參數，就是用來提前加載的。上面這個語句的意思是，當距離(lí)圖片還有200像素的時候，就開(kāi)始加載圖片。

自定義觸發事件

默認的觸發事件，是滾動，當你滾動的時候，就會檢查然後加載。你可以使用event屬性，設置你自己的加載事件，之後你可以自定義觸發這個事件的條件，然後去(qù)加載圖像。

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

自定義顯示效果

默認的圖片實現效果，就是沒有效果，下(xià)載完成之後，直接顯示出來。這樣的用戶體(tǐ)驗并不好，你可以設置 effect 屬性，來控制顯示圖片的效果。例如

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

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

把圖像插入某個容器

大(dà)家如果使用智能手機的話(huà)，經常去(qù)應用網站下(xià)載應用，他們通常使用一(yī)個橫着的容器，放(fàng)一(yī)些手機截圖。使用 container 屬性，能很輕松在容器中(zhōng)實現緩沖加載。首先，我(wǒ)們需要用css定義這個容器，然後用這個插件進行加載。效果：vertical

#container { height: 600px; overflow: scroll; }

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

加載不可見圖像

有部分(fēn)圖像是不可見的，我(wǒ)們對其加上類似 display：none 等屬性的圖像。默認的情況下(xià)，這個插件是不會加載隐藏的不可見圖像。如果我(wǒ)們需要用它加載不可見圖像，我(wǒ)們需要将 skip_invisible 設置爲 false

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