圖檔懶加載 lazyload.js使用方法

lazyload是一個用Javascript編寫的jQuery插件，它可以延遲加載長頁面中的圖檔，在浏覽器可視區域外的圖檔将不會被載入，直到使用者将它們滾動到它們所在的位置。

跟bootstrap一樣，lazyload.js也是依賴于jQuery

<code>&lt;</code><code>script</code> <code>src</code><code>=</code><code>"resources/js/jquery-1.8.3.min.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code>&lt;</code><code>script</code> <code>src</code><code>=</code><code>"resources/js/jquery.lazyload.min.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code>

與之前的圖檔引入路徑不同，真實的圖檔路徑不再是用src屬性，而是data-original。src屬性用于引入占位符圖檔（當然，個人更推薦占位符不寫在img标簽裡）。同時，必須設定img的寬度和高度，給每一個懶加載的圖檔加一個class比如.lazy

四大屬性必須同時具備：class   data-original   width  height

<code>&lt;</code><code>img</code> <code>class</code><code>=</code><code>"lazy"</code> <code>width</code><code>=</code><code>"640"</code> <code>height</code><code>=</code><code>"480"</code> <code>data-original</code><code>=</code><code>"resources/images/2.jpg"</code><code>&gt;</code>

要想讓所有class為lazy的圖檔懶加載，隻需要簡單的一行代碼就可以

<code>&lt;</code><code>script</code><code>&gt;</code>

<code>    </code><code>$('img.lazy').lazyload( );</code>

<code>&lt;/</code><code>script</code><code>&gt;</code>

<code>&lt;/</code><code>body</code><code>&gt;</code>

<code>&lt;/</code><code>html</code><code>&gt;</code>

設定臨界點

預設情況下，圖檔會出現在顯示區域時才加載，如果想提前加載圖檔，可以設定 threshold 選項，比如設定thredshold為200，令圖檔在距離顯示區域200px時提前加載

<code>$(</code><code>'img.lazy'</code><code>).lazyload({</code>

<code>    </code><code>threshold:200,</code>

<code>});</code>

設定占位符

前面提到過，可以用img标簽的src屬性引入一個圖檔，比如loading.gif，替代未進去顯示區域的待加載圖檔，我們同樣可以添加 placeholder 選項來實作

<code>    </code><code>placeholder:</code><code>'resources/images/loading.gif'</code>

設定事件來觸發加載

可以用jQuery事件如click，mouseover，也可以用自定義事件，預設情況下，是要等到使用者向下滾動并且圖像出現在顯示區域時才觸發。比如：隻有當使用者點選的時候才加載圖檔

<code>    </code><code>event:</code><code>'click'</code>

<a href="http://s5.51cto.com/wyfs02/M01/89/5B/wKiom1gQb2bCiPInAADu4vQaVz8328.png" target="_blank"></a>

使用特效

預設情況下，插件等待圖像完全加載後調用show（）方法來顯示圖檔，我們也可以用一些特效比如：fadeIn

<code>    </code><code>effect:</code><code>'fadeIn'</code>

圖檔在容器裡面

可用在容器可滾動的圖檔上，例如帶滾動條的DIV元素，需要将容器定義為jQuery對象，并作為參數傳到初始化方法裡面，比如：垂直滾動

<code>#container {</code>

<code>    </code><code>height</code><code>: </code><code>600px</code><code>;</code>

<code>    </code><code>overflow</code><code>: </code><code>scroll</code><code>;</code>

<code>}</code>

<code>&lt;</code><code>img</code> <code>class</code><code>=</code><code>"lazy"</code> <code>data-original</code><code>=</code><code>"img/example.jpg"</code> <code>width</code><code>=</code><code>"765"</code> <code>height</code><code>=</code><code>"574"</code><code>&gt;</code>

<code>$(</code><code>"img.lazy"</code><code>).lazyload({         </code>

<code>    </code><code>effect : </code><code>"fadeIn"</code><code>,</code>

<code>    </code><code>container: $(</code><code>"#container"</code><code>)</code>

當圖檔不順序排列

滾動頁面的時候, Lazy Load 會循環的加載圖檔. 在循環中檢測圖檔是否在可視區域内. 預設情況下在找到第一張不在可見區域的圖檔時停止循環. 圖檔被認為是流式分布的, 圖檔在頁面中的次序和 HTML 代碼中次序相同. 但是在一些布局中, 這樣的假設是不成立的. 不過你可以通過 failurelimit 選項來控制加載行為.

<code>$(</code><code>"img.lazy"</code><code>).lazyload({ </code>

<code>    </code><code>failure_limit : 10</code>

将 failurelimit 設為 10 令插件找到 10 個不在可見區域的圖檔是才停止搜尋. 如果你有一個猥瑣的布局, 請把這個參數設高一點.

加載隐藏圖檔

可能在你的頁面上埋藏可很多隐藏的圖檔. 比如插件用在對清單的篩選, 你可以不斷地修改清單中各條目的顯示狀态. 為了提升性能, Lazy Load 預設忽略了隐藏圖檔. 如果你想要加載隐藏圖檔, 請将 skip_invisible 設為 false

<code>    </code><code>skip_invisible : </code><code>false</code>

更詳細的學習頁面，可參考：

<a href="http://www.w3cways.com/1765.html" target="_blank">http://www.w3cways.com/1765.html</a>

相關插件下載下傳連結：

<a href="https://github.com/tuupola/jquery_lazyload" target="_blank">https://github.com/tuupola/jquery_lazyload</a>

本文轉自   frwupeng517   51CTO部落格，原文連結:http://blog.51cto.com/dapengtalk/1865965