jQuery.lazyload

Lazy Load延遲加載也有的稱爲惰性加載，是一個用 JavaScript 編寫的 jQuery 插件. 它能夠延遲加載長頁面中的圖片. 在瀏覽器可視區域外的圖片不會被載入, 直到用戶將頁面滾動到它們所在的位置. 這與圖片預加載的處理方式正好是相反的.
在包含不少大圖片長頁面中延遲加載圖片能夠加快頁面加載速度. 瀏覽器將會在加載可見圖片以後即進入就緒狀態. 在某些狀況下還能夠幫助下降服務器負擔.

延遲加載是程序人性化的一種體現，提升用戶體驗，防止一次性加載大量數據，而是根據用戶須要進行數據查詢操做。

1、怎麼使用?

1.  Lazy Load 依賴於 jQuery,將下列代碼加入頁面 head 區域,固然也能夠將這些代碼放在</body>以前

<script src=」jquery-1.7.1.min.js」 type=」text/javascript」></script>
<script src=」jquery.lazyload.mini.js」 type=」text/javascript」></script>

2. HTML代碼中src屬性能夠是1×1像素灰色gif,也能夠是咱們經常使用的一些等待加載圖標.data-original屬性纔是咱們須要加的圖片

<img class=」lazy」 src=」img/grey.gif」 data-original=」img/example.jpg」 width=」640″ heigh=」480″>

3.而後在執行代碼中加入

$(「img.lazy」).lazyload();

這樣樣式爲lazy的圖片都將進行延遲加載.

2、禁用JavaScript瀏覽器的退路
幾乎全部人的瀏覽器都啓用JavaScript。固然也有某些狀況下也有或禁用JavaScript的用戶存在，固然這不是致命的，咱們可使用「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隱藏一個。

.lazy { display: none; }

對於啓用JavaScript的瀏覽器,當初始化插件。

$(「img.lazy」).show().lazyload();

這樣當咱們的瀏覽器都禁用JavaScript的時候也能夠顯示咱們須要的圖片。

3、設置靈敏度

默認狀況下圖片出如今瀏覽器可視區域就加載，瀏覽器可視區域外不加載。若是想要瀏覽器可視區域外的圖片來加載能夠設置閾值參數。threshold 選項默認值爲 0（瀏覽器可視區域到圖片的距離）。

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

這樣，當瀏覽器可視區與圖片的距離太到200像素時圖片就進行加載。

4、事件來觸發加載

事件能夠是任何jQuery或mouseover事件,好比點擊。您也可使用本身的自定義事件,如運動或foobar。默認是當到用戶滾動瀏覽器使圖片出如今可視區域加載。

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

5、使用特效

默認狀況下插件等待圖像徹底加載用show()來顯示它。咱們可使用任何你想要的效果。下面的代碼使用fadeIn效果。

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

6、容器內圖像加載

可使用插件在滾動圖像容器加載,好比div和滾動條。只需經過這個容器做爲jQuery對象。

CSS部份

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

js部份

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

7、當圖片不順序排列

滾動頁面的時候, Lazy Load 會循環爲加載的圖片. 在循環中檢測圖片是否在可視區域內. 默認狀況下在找到第一張不在可見區域的圖片時中止循環. 圖片被認爲是流式分佈的, 圖片在頁面中的次序和 HTML 代碼中次序相同. 可是在一些佈局中, 這樣的假設是不成立的. 不過咱們能夠經過 failurelimit 選項來控制加載行爲.

$(「img.lazy」).lazyload({ failure_limit : 10 });

將 failurelimit 設爲 10， 當插件找到 10 個不在可見區域的圖片是才中止搜索. 若是你有一個猥瑣的佈局, 請把這個參數設高一點.
8、延遲加載圖片 
Lazy Load 插件的一個不完整的功能, 可是也能用來實現圖片的延遲加載. 下面的代碼實現了頁面加載完成後再加載. 頁面加載完成 5 秒後, 指定區域內的圖片會自動進行加載.

$(function() {

$(「img:below-the-fold」).lazyload({ event : 「sporty」 });

});

$(window).bind(「load」, function() {

var timeout = setTimeout(function() {$(「img.lazy」).trigger(「sporty」)}, 5000);

});

參數說明

名稱	默認值	說明
container	window	父容器。延遲加載父容器中的圖片。 [Demo1] [Demo2]
event	'scroll'	觸發加載的事件 [Demo]
effect	'show'	加載使用的動畫效果，如 show, fadeIn, slideDown 等 jQuery 自帶的效果，或者自定義動畫。 [Demo]
effectspeed	undefined	動畫時間。做爲 effect 的參數使用：effect(effectspeed)
data_attribute	'original'	真實圖片地址的 data 屬性後綴
threshold	0	靈敏度。默認爲 0 表示當圖片出如今顯示區域中的當即加載顯示；設爲整數表示圖片距離 x 像素進入顯示區域時進行加載；設爲負數表示圖片進入顯示區域 x 像素時進行加載。
failure_limit	0	容差範圍。頁面滾動時，Lazy Load 會遍歷延遲加載的圖片，檢查是否在顯示區域內，默認找到第 1 張不可見的圖片時，就終止遍歷。由於 Lazy Load 認爲圖片的排序是與 HTML 中的代碼中的排序相同，可是也可能會出現例外，經過該值來擴大容差範圍。
skip_invisible	true	跳過隱藏的圖片。圖片不可見時（如 display:none），不強制加載。
appear	null	圖片加載時的事件 (Function)，有 2 個參數：elements_left（未加載的圖片數量）、settings（lazyload 的參數）。[Demo]（參考 DEMO 的源代碼）
load	null	圖片加載後的事件 (Function)，有 2 個參數，同 appear 。[Demo]（參考 DEMO 的源代碼）