1

我有这个 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 插件一起使用的全屏幻灯片），我试图在加载所有图像时显示加载栏，因为它们对于每个图像来说非常大，大约 150kb。

演示

如您所见，我的加载栏功能不全。它只计数直到加载MaxCycle

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

那么我怎样才能使这个加载工作 100% 特别是百分比数字，以检查每个图像是否已加载？

非常感谢。

4

0 回答 0