Question

我设计了一个进度条，它将放在一个黑色背景的框中，然后一直工作到页面加载。然后div淡出，实际网站出现。但进度条必须遵循两条规则：

首先它必须工作，直到页面完全加载。（我建议使用$(".page").remove();，这是正确的吗？）
其次，进度条必须有最小和最大加载时间。因此加载至少需要5秒钟，最多需要10秒钟。

所以我创建了带有样式的进度条，但是js部分没有遵循上述规则。

DEMO 这是我的代码：

HTML

<div class="page">
    <div id="progressbar"></div>
    <div class="progress-label">Loading...</div>
</div>

CSS

.ui-progressbar-value {
    background: url(http://upload.wikimedia.org/wikipedia/fr/b/bb/SoundCloud_logo.png) no-repeat;
    -webkit-filter: grayscale(0%);
    background-size: 300px 200px;
    border: 0px;
    -webkit-filter: sepia(100%);
}
.ui-progressbar {
    width: 300px;
    background: url(http://upload.wikimedia.org/wikipedia/fr/b/bb/SoundCloud_logo.png) no-repeat;
    background-size: 300px 200px;
    height: 200px;
    border: 0;
}
.ui-progressbar .ui-progressbar-value {
    margin: 0;
}
.progress-label {
    font-size: 90px;
    color: white
}
.page {
    position: fixed;
    left: 0;
    top: 0;
    background-color: black;
    width: 100%;
    height: 100%;
}

的jQuery

$(function() {
    var progressbar = $("#progressbar"),
        progressLabel = $(".progress-label");

    progressbar.progressbar({
        value: false,
        change: function() {
            progressLabel.text(progressbar.progressbar("value") + "%");
        },
        complete: function() {
            progressLabel.text("Done!");
            $(".page").fadeOut(1000);
        }
    });

    function progress() {
        var val = progressbar.progressbar("value") || 0;

        progressbar.progressbar("value", val + 1);

        if (val < 99) {
            setTimeout(progress, 100);
        }

    }

    setTimeout(progress, 1000);
});

我是jQuery的新手，不知道如何同时满足上述两条规则。

有什么想法来解决它吗？

如何设置进度条的最短和最长时间

0 个答案: