基於 jQuery 的圖片延遲加載插件，在用戶滾動頁面到圖片之後才進行加載。

對於有較多的圖片的網頁，使用圖片延遲加載，能有效的提高頁面加載速度。

註意事項：

需要真正實現圖片延遲加載，必須將真實圖片地址寫在 data-original 屬性中。若 src 與 data-original 相同，則只是一個特效而已，並不達到延遲加載的功能。

下載地址：https://appelsiini.net/projects/lazyload/

使用方法：

1.載入js文件；

1 <script src="jquery.js"></script>
2 <script src="jquery.lazyload.js"
 
></script>

2.修改html代碼中需要延遲加載的Img標簽；

<!--
將真實圖片地址寫在 data-original 屬性中，而 src 屬性中的圖片換成占位符的圖片（例如 1x1 像素的灰色圖片或者 loading 的 gif 圖片）
添加 class="lazy" 用於區別哪些圖片需要延時加載，當然你也可以換成別的關鍵詞，修改的同時記得修改調用時的 jQuery 選擇器
添加 width 和 height 屬性有助於在圖片未加載時占滿所需要的空間
-->
<img class="lazy" src="grey.gif" data-original
 
="example.jpg" width="640" heigh="480">

3.調用lazyload;

1 $(‘img.lazy‘).lazyload();

參數說明

名稱	默認值	說明
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 的源代碼）

jQuery Lazy Load 圖片延遲加載