jQuery圖片延遲載入

一、HTML代碼如下：

<div class="box">
    <ul>
        <li><img originalsrc="images/1.jpg" /></li>
        <li><img originalsrc="images/2.jpg" /></li>
        <li><img originalsrc="images/3.jpg" /></li>
        <li><img originalsrc="images/4.jpg" /></li>
        <li><img originalsrc="images5.jpg" /></li>
        <li><img originalsrc="images/6.jpg" /></li>
        <li><img originalsrc="images/7.jpg" /></li>
        <li><img originalsrc="images/8.jpg" /></li>
        <li><img originalsrc="images/9.jpg" /></li>
        <li><img originalsrc="images10.jpg" /></li>
    </ul>
</div>

二、jQuery代碼如下：

<script src="js/jquery-1.6.js" type="text/javascript"></script>
<script src="js/lyz.delayLoading.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
    $("img").delayLoading({
        defaultImg: "images/loading.jpg",    // 預載入前顯示的圖片
        errorImg: "",                        // 讀取圖片錯誤時替換圖片(預設：與defaultImg一樣)
        imgSrcAttr: "originalSrc",           // 記錄圖片路徑的屬性(預設：originalSrc，頁面img的src屬性也要替換為originalSrc)
        beforehand: 0,                       // 預先提前多少像素載入圖片(預設：0)
        event: "scroll",                     // 觸發載入圖片事件(預設：scroll)
        duration: "normal",                  // 三種預定淡出(入)速度之一的字元串("slow", "normal", or "fast")或表示動畫時長的毫秒數值(如：1000),預設:"normal"
        container: window,                   // 對象載入的位置容器(預設：window)
        success: function (imgObj) { },      // 載入圖片成功後的回調函數(預設：不執行任何操作)
        error: function (imgObj) { }         // 載入圖片失敗後的回調函數(預設：不執行任何操作)
    });
});
</script>