javascript - jQuery画像のカスタム読み込みを適用する方法は?

Question

私はこのHTMLを持っています:

<div class="page-loading-wrapper">
    <div style="width: 168px" class="slide-content">
        <div class="loading-panel" style="background-color: #dddddd; height: 120px; position: relative">
            <div class="loading-text"><span class="loading-number">0</span>%</div>
            <div class="loading-load">LOADING</div>
        </div>
        <img src="images/shkeer-loading.png" width="168" height="91" alt="" />
    </div>
    <div class="loading-bottom-line"></div>
</div>

<div id="maximage">
    <div>
        <img src="images/bg/bg.jpg" width="1580" height="889" alt="" />
    </div>
    <div>
        <img src="images/bg/bg2.jpg" width="1352" height="748" alt="" />
    </div>
    <div>
        <img src="images/bg/bg3.jpg" width="1285" height="803" alt="" />
    </div>
    <div>
        <img src="images/bg/bg4.jpg" width="1290" height="807" alt="" />
    </div>
    <div>
        <img src="images/bg/bg5.jpg" width="1295" height="921" alt="" />
    </div>
    <div>
        <img src="images/bg/bg6.jpg" width="1280" height="750" alt="" />
    </div>
    <div>
        <img src="images/bg/bg7.jpg" width="1280" height="750" alt="" />
    </div>
</div>

そしてこのJavascriptコード：

$('#maximage').maximage({
        onImagesLoaded: function() {
                    $(".page-loading-wrapper").slideUp("slow");
                },
        cycleOptions: {
            fx:'scrollHorz',
            autostopCount: 1,
            autostop: 1
        }
    });

およびロードするためのこのコード：

function changeLoading() {

        var height = parseInt($(".loading-panel").height()) + 5;
        $(".loading-panel").css("height", height + "px");
        if ( height == 325) {
            clearInterval(t);
            var t2 = setInterval(changeNum, 110);   
        }
    }

function changeNum() {
        var n = parseInt($(".loading-number").html()) + 1;
        $(".loading-number").html(n);

        if ( n == 100) {
            clearInterval(t2);  
        }

    }
var t = setInterval(changeLoading, 10);

MaxCycle (jQuery Cycle Plugin で使用するフルスクリーン スライドショー) を使用しており、各画像が約 150kb と非常に大きいため、すべての画像の読み込み中に読み込みバーを表示しようとしています。

デモ

ご覧のとおり、読み込みバーが完全に機能していません。MaxCycleが読み込まれるまでカウントします

                 onImagesLoaded: function() {
                    $(".page-loading-wrapper").slideUp("slow");
                }

では、各画像がロードされているかどうかを確認するために、このロードを特にパーセント数で 100% 動作させるにはどうすればよいですか?

どうもありがとうございました。