Lazy Load(1.7.0)中文文檔 -- 消極式載入圖片的jQuery外掛程式

最近貌似都在做"閱讀理解".哈~

要自己讀懂文檔其實不會浪費很多時間.但要通過自己的語言來表述,就需要更深的瞭解.

所以往往把時間花費在研究外掛程式的代碼,這樣才能更多的瞭解作者的意圖,好轉變為自己的文字.

畢竟 Lazy Load 已經不是一個新的外掛程式,所以網上也有很多的漢化文檔.但前段時間Lazy Load有較大的更新.

而且Lazy Load這個外掛程式也不大,還不夠200行代碼,要是肯花點時間看看,根本文檔都不需要查.

但大多數人還是希望把工具拿到手就能直接使用,而不是去研究工具怎麼製作出來的,所以說明書還是有存在的必要.

另外,本文還添加了一些原文中沒有介紹到的屬性.

 

原文的連結在:http://www.appelsiini.net/projects/lazyload

現在Lazy Load的版本已經是1.7.0

:   完整版https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.js  ,  

                    壓縮版https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js

 

下面進入正題.

 

Lazy Load的使用方法十分簡單,但新版做了一些調整,必須修改 <img> 標籤的屬性.

把 <img> 標籤中的 src 屬性改為等待圖片的URL, data-original 屬性填上真正的圖片URL.

如下:
[html]
<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480"> 
<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">建議:src中的等待圖片,最好使用1像素的單色圖片.

JS代碼如下:

[javascript]
$("img.lazy").lazyload(); 
$("img.lazy").lazyload();這樣就能實現Lazy Load的效果了.    Demo
看完Demo後,是不是覺得沒什麼效果出現?

這個問題會在後面提到.

 

其實,並非一定要使用它規定的 data-original 屬性來存放圖片URL.

你也可以自己定製別的屬性名稱,如下:

 

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

JS代碼如下:

[javascript]
$("img.lazy").lazyload({ data_attribute : "attr" }); 
$("img.lazy").lazyload({ data_attribute : "attr" });
只需設定 data_attribute 屬性為對應的名稱即可.     
注意:html代碼大小寫不敏感!所以 "data-" 後面只能跟小寫字母或數字.

 

 

對於不支援JavaScript的瀏覽器,應該有相應的降級處理.

可以使用<noscript>標籤,是用來定義在指令碼未被執行時的替代內容/文本.

而且這樣做還有一個好處,因為搜尋引擎的爬蟲是不處理JavaScript指令碼的,所以能直接抓到<noscript>標籤中的內容.

 

[html]
<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> 
<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>CSS樣式設定:[css]
.lazy { 
  display: none; 
} 
.lazy {
  display: none;
}JS代碼:
[javascript]
$("img.lazy").show().lazyload(); 
$("img.lazy").show().lazyload();

 

 

 

設定圖片載入的反應距離

Lazy Load外掛程式預設的設定是:圖片在瀏覽器視窗上出現,就會觸發載入.

但通過設定 threshold 屬性的值,可以調整圖片的積極式載入位置/距離.

 

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

 

另外, threshold 可以為正數或者負數.
正數是積極式載入, 假設數值為200, 則圖片距離出現到螢幕還有 200px 時,就開始載入.

如果是負數,則相反.假設數值為-200時,則圖片已經在視窗出現,並且距離瀏覽器視窗底部的距離為 200px 時,才開始載入.

PS:圖片和螢幕的距離是根據圖片的 top 位置計算.

注意:threshold的設定需要考慮網站的長度和圖片的高度,如果數值過大則會導致無法載入的問題.建議數值設定不要超過相應圖片高度的一半.

 

 

通過事件觸發載入

可以通過jQuery定義的事件來觸發載入,也可以使用自己定義的事件.

 

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

 

 

實現動畫效果

上面的Demo之所以會沒有圖片載入的效果,是因為Lazy Load預設的圖片載入是通過 jQuery 的show()方法來顯示,所以圖片出現幾乎是一瞬間.

當然我們還可以實現其他效果.

 

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

Demo

另外還可以使用 slideDown() 方法,但效果不佳.
如果想要控制動畫的速度,還可以修改 effectspeed 屬性.

 

[javascript]
$("img.lazy").lazyload({  
    effect : "fadeIn", 
    effectspeed : 1000 
}); 
$("img.lazy").lazyload({
    effect : "fadeIn",
    effectspeed : 1000
});effectspeed 屬性預設是空的,所以如果不設定它,動畫的時間為400毫秒.

 

 

容器

當要消極式載入的圖片全擺在一個容器中.

只需把 container 屬性指向擺放 img 的容器的對象.

css代碼:

 

[css]
#container { 
    height: 600px; 
    overflow: scroll; 
} 
#container {
    height: 600px;
    overflow: scroll;
}
js代碼:

 

[javascript]
$("img.lazy").lazyload({          
     container: $("#container") 
}); 
$("img.lazy").lazyload({        
     container: $("#container")
});廢話不多說,直接看Demo ,不單豎著的可以, 橫著也行Demo .

 

 

 

When Images Are Not Sequential ( 當圖片並非有序呈現在瀏覽器視窗的時候 )

原文:After scrolling page Lazy Load loops though unloaded images. In loop it checks if image has become visible. By default loop is stopped when first image below the fold (not visible) is found. This is based on following assumption. Order of images on page is same as order of images in HTML code. With some layouts assumption this might be wrong. You can control loading behaviour with failure_limit option.

這段話怎麼讀怎麼難理解.經過網上一番搜尋,總算弄懂了.

 

 

Lazy Load 有一個迴圈尋找 img 的機制.根據 HTML 文檔的布局從上往下尋找,當找到第一個並未顯示/載入的 img 時,就會停止往下尋找.(其實就是對 $("img.lazy") 這個對象(組)進行順序尋找)

那這個 failure_limit 的屬性有什麼用呢?

現在網站設計時,都會用到大量的定位樣式,如: float 和 position , 這樣在瀏覽器呈現的布局效果和 HTML 文檔中的 DOM 順序有很大差異.

這樣就會存在一種情況,某 <img> 標籤已出現在螢幕上,但它卻無法顯示!! 

因為它在 HTML 文檔中的實際位置排在了那些還沒有顯示的 <img> 標籤後面, 這樣會導致顯示在螢幕上的這個 <img> 標籤無法載入相應的圖片.

當Lazy Load 在找到第一個未顯示的 <img> 標籤時,尋找已經被終止了, 並沒有繼續往下遍曆.

所以這個時候,就可以使用failure_limit屬性.

 

[javascript]
$("img.lazy").lazyload({  
    failure_limit : 10 
}); 
$("img.lazy").lazyload({
    failure_limit : 10
});
這樣 Lazy Load 會尋找到第10個未顯示的 <img> 標籤處.

當在圖片多且布局複雜的頁面時, failure_limit 的作用就很大了.

原文還溫馨提示:If you have a funky layout set this number to something high.  如果你的網站布局很"變態",建議把該值調得更高.

 

 

 

延遲下載圖片

 

可以通過自訂事件,然後通過 setTimeout 來設定延遲觸發該事件.

[javascript]
$(function() {           
    $("img:below-the-fold").lazyload({ 
        event : "sporty" 
    }); 
}); 
 
$(window).bind("load", function() {  
    var timeout = setTimeout(function() {$("img.lazy").trigger("sporty")},5000); 
});  
$(function() {         
    $("img:below-the-fold").lazyload({
        event : "sporty"
    });
});

$(window).bind("load", function() {
    var timeout = setTimeout(function() {$("img.lazy").trigger("sporty")},5000);
}); 
主要原理是,當 event 被設定為 scroll 以外的事件時, 實際上都會綁定了一個內建的 "appear" 事件.

顧名思義, 這個事件就是用來顯示圖片的. (其實 scroll 也是調用這個事件)

 

 

 

載入不可見的圖片

 

 

Lazy Load 外掛程式預設對隱藏的圖片不載入(例如 display:none ). 這樣做有助於效能的最佳化.

如果希望連隱藏的圖片一起載入,則可以把 skip_invisible 設為 false .

 

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

 

Plugin has been tested with Safari 5.1, Firefox 3.6, Firefox 7.0, Firefox 8.0 on OSX and Firefox 3.0, Chrome 14 and IE 8 on Windows and Safari 5.1 on iOS 5 both iPhone and iPad.

 

 

其實1.7.0版還有一些新的特性.有空再補上.

 摘自 簡生的代碼備忘錄