jquery.lazyload.js外掛用法簡單介紹

現在圖片延遲技術在很多網站都有應用，可以有效的提高網站的體驗度，jquery.lazyload.js是一個當前比較使用比較流行的外掛，實現此功能的效果相當不錯，下面就簡單介紹一下它的用法。

一.引入響應庫檔案:

[HTML] 純文字檢視 複製程式碼
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

既然要使用外掛，就要先引入庫，並且要注意順序，jquery庫要首先引入。

二.屬性的確立:

[HTML] 純文字檢視 複製程式碼
<img class="lazy" data-original="img/example.jpg" width="200" height="200"/>

圖片必須要具備四個屬性，並且缺一不可，否則不能夠實現我們想要的延遲載入效果。

三.使用程式碼:

[JavaScript] 純文字檢視 複製程式碼
$(function() {
  $("img.lazy").lazyload();
});

四.常見屬性解析:

此外掛有一些比較常用的屬性，下面就做一下簡單解析:

1.threshold:500,用來設定靈敏度，此程式碼表示進入顯示區域還有500畫素就開始載入。

2.effect:"fadeIn",設定延遲載入的展現方式，這裡是使用淡入特效。

3.failure_limit:10，用來設定容差範圍，此屬性是必須的。

4.container: $("#container") ，設定父級容器，此父級元素要包含以下css屬性:

[JavaScript] 純文字檢視 複製程式碼
height:600px;
overflow:scroll

5.event:"click"，用來設定事件型別，這裡是單擊事件。