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

admin

Lazy Load 這個(gè) jQuery 插件，是用來(lái)緩沖加載圖片的插件。如果一篇文章很長(cháng)有很多圖片的話(huà)，下載圖片就需要很多時(shí)間。而這款插件，會(huì )檢測你的滾動(dòng)情況，只有你要看到那個(gè)圖片的時(shí)候，它才會(huì )從后臺請求下載圖片，然后顯示出來(lái)。使用這個(gè)插件，可以在需要顯示圖片的時(shí)候，才下載圖片，所以可以減少服務(wù)器的壓力，避免不必要的資源下載。如果一個(gè)人不看下面的圖片，那加載下面的圖片就是一種浪費。

Lazy Load 插件原理

修改目標 img 的 src 屬性為 orginal 屬性，從而中斷圖片的加載。檢測滾動(dòng)狀態(tài)，然后把可視網(wǎng)頁(yè)中的 img 的 src 屬性還原加載圖片，制造緩沖加載的效果。

但是現在，很多javascript大牛分析得出，這個(gè)插件其實(shí)并沒(méi)有真正的緩加載效果。確實(shí)是這樣，官方也已經(jīng)給出了說(shuō)明和解決方法了。

問(wèn)題原因：在新版的瀏覽器中，即使你刪除了 Javascript 控制的 src 屬性，瀏覽器仍然會(huì )去加載這個(gè)圖像。

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

例如：<img data-original=“img/example.jpg” src=“img/grey.gif”>

這樣我們就需要先分析一下插件的優(yōu)缺點(diǎn)，再決定是否要使用。

使用：

必須按照這種結構才有實(shí)際作用，需要對輸出進(jìn)行定義。
可以節約服務(wù)器資源，并且有較好的用戶(hù)體驗。
如果圖片很大，當用戶(hù)滾動(dòng)到目標位置，需要較長(cháng)時(shí)間下載。
不使用：

增加服務(wù)器壓力，浪費系統資源。
究竟使用不使用，還是要看你自己的實(shí)際需求。如果你圖片比較少，就不必使用了，如果你圖片比較多，可以考慮一下。但是，使用的話(huà)，你可能需要把每一 個(gè)img 標簽上自己加上這個(gè)屬性，會(huì )稍微麻煩一點(diǎn)。潛行者m博客上，就用了這個(gè)插件，不過(guò)沒(méi)用使用官方說(shuō)的那種結構，要的只是一個(gè)緩沖加載的效果。

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

第一步：加載相關(guān)文件。

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

<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">
第三步：觸發(fā)這個(gè)插件，生效。

激活以下，你就可以在目標中使用了。

$("img.lazy").lazyload();
lazyload.js 高級使用方法：

下面部分來(lái)自官方文檔，將官方文檔進(jìn)行了一下簡(jiǎn)單的翻譯。

更周全的做法

我們不得不思考這樣一個(gè)問(wèn)題。我們定義了這樣一個(gè)結構，那么網(wǎng)頁(yè)中，就不會(huì )加載源圖像了。只有當 Javascript 執行，才會(huì )顯示這個(gè)源圖像。如果用戶(hù)的瀏覽器不支持或者用戶(hù)關(guān)掉了支持 Javascript 的選項，那么我們的這個(gè)圖像就無(wú)法顯示出來(lái)。也就是說(shuō)，如果沒(méi)有 Javascript 的支持，我們的圖像就無(wú)法顯示出來(lái)。

應對這個(gè)問(wèn)題，我們需要引入 noscript 標簽。大體思路如下：用 noscript 包含真實(shí)的圖像位置，當瀏覽器不支持 Javascript，直接顯示圖像。對現有圖像，隱藏處理，使用 show() 方法觸發(fā)顯示。這樣，如果瀏覽器不支持 Javascript，我們自定義的 img 就不會(huì )出現，而顯示 noscript 里面的圖像。具體實(shí)現代碼如下：

<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>
提前加載

默認的情況是，當你滾動(dòng)到圖片位置的時(shí)候，插件開(kāi)始加載。這樣，用戶(hù)可能首先看到的是一個(gè)空白圖像，然后再緩慢出現。如果你想在用戶(hù)滾動(dòng)之前，提前加載這個(gè)圖像，你可以配置一下參數。

$("img.lazy").lazyload({ threshold : 200 });
threshold 這個(gè)參數，就是用來(lái)提前加載的。上面這個(gè)語(yǔ)句的意思是，當距離圖片還有200像素的時(shí)候，就開(kāi)始加載圖片。

自定義觸發(fā)事件

默認的觸發(fā)事件，是滾動(dòng)，當你滾動(dòng)的時(shí)候，就會(huì )檢查然后加載。你可以使用event屬性，設置你自己的加載事件，之后你可以自定義觸發(fā)這個(gè)事件的條件，然后去加載圖像。

$("img.lazy").lazyload({ event : "click" });
自定義顯示效果

默認的圖片實(shí)現效果，就是沒(méi)有效果，下載完成之后，直接顯示出來(lái)。這樣的用戶(hù)體驗并不好，你可以設置 effect 屬性，來(lái)控制顯示圖片的效果。例如

$("img.lazy").lazyload({ effect : "fadeIn" });
fadeIn的效果就是，改變圖片的透明度，漸現的方式出現。效果： effect demo page

把圖像插入某個(gè)容器

大家如果使用智能手機的話(huà)，經(jīng)常去應用網(wǎng)站下載應用，他們通常使用一個(gè)橫著(zhù)的容器，放一些手機截圖。使用 container 屬性，能很輕松在容器中實(shí)現緩沖加載。首先，我們需要用css定義這個(gè)容器，然后用這個(gè)插件進(jìn)行加載。效果： vertical

#container { height: 600px; overflow: scroll; }
$("img.lazy").lazyload({         
     container: $("#container")
});
加載不可見(jiàn)圖像

有部分圖像是不可見(jiàn)的，我們對其加上類(lèi)似 display：none 等屬性的圖像。默認的情況下，這個(gè)插件是不會(huì )加載隱藏的不可見(jiàn)圖像。如果我們需要用它加載不可見(jiàn)圖像，我們需要將 skip_invisible 設置為 false

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