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版還有一些新的特性.有空再補上.

 摘自 簡生的代碼備忘錄
 

發佈留言