Lazy Load 網頁圖片延遲加載

Lazy Load 當你的網站上有很多商品圖片的時候，會開始慢慢地感覺到進入網站的速度是越來越慢，而這一個套件主要是先讓網頁加載非圖片的靜態檔案，當使用者開始做向下瀏覽的時候才開始加載網站的圖片，對於有比較多圖片的網頁使用延遲加載的功能，能夠很有效的提高網頁本身的顯示速度，基於 jQuery 框架對於開發網站其他功能也很方便。


使用方法：
第一步 載入 Lazy Load 需要使用到的 JavaScript 檔案
<!-- 使用 Google AJAX API 取得 jQuery 框架 1.8.2 min 版本 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- 載入 Ideal Forms 的主程式碼-->
<script src="js/jquery.lazyload.min.js"></script>

第二步 寫入圖片的 HTML 片段
<img src="img/grey.gif" data-original="img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood"><br/>
<img src="img/grey.gif" data-original="img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side"><br/>
<img src="img/grey.gif" data-original="img/viper_1.jpg" width="765" height="574" alt="Viper 1"><br/>
<img src="img/grey.gif" data-original="img/viper_corner.jpg" width="765" height="574" alt="Viper Corner"><br/>
<img src="img/grey.gif" data-original="img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT"><br/>
<img src="img/grey.gif" data-original="img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop"><br/>
載入多張大圖方便看到效果

第三步 使用 JavaScript 來初始化 Lazy Load 套件
$(function(){
$("img").lazyload();
});

附上 Lazy Load 套件可修改參數值

名稱	預設值	說明
threshold	0	靈敏度。預設為 0 表示圖片出現在顯示區域中立刻加載顯示內容；設定為整數時表示圖片距離 x 像素即開始進行加載。
failure_limit	0	容許範圍。頁面滾動時，Lazy Load 容許圖片讀取錯誤的數量。
event	"scroll"	觸發 Lazy Load 讀取圖片的 Event
effect	"show"	加載圖片顯示的動畫效果。
effectspeed	undefined	動畫時間
container	window	Lazy Load 延遲加在地父容器。
data_attribute	"original"	真實圖片位置的 data 屬性後缀
skip_invisible	true	是否跳過隱藏圖片。
appear	null	圖片加載時的事件
load	null	圖片加載後的事件

作者網站：http://www.appelsiini.net/projects/lazyload
檔案大小：1601 KB (包含範例)
檔案下載：https://github.com/tuupola/jquery_lazyload
備份下載：下載