在显示之前构建一个进度条以加载所有内容

Question

您好，我在询问之前确实尝试过搜索.. 我尝试使用 jquery 作为进度条，我找到了很多信息，问题是大多数示例只是“动画”，我的意思是，它们并没有真正显示%，加载过程..我找不到办法。

我正在尝试使用这个http://www.htmldrive.net/items/show/791/Very-Beautiful-CSS3-And-JQuery-progress-bar

混合了这个问题的正确答案。 how to create a jQuery loading bar? (like the ones used on flash sites)

但我就是无法合并

$.when($.ajax("video1.ogv"))
.then(function () {
    videoLoaded[1] = true;
    updateProgressBar();
});

$.when($.ajax("video2.ogv"))
.then(function () {
    videoLoaded[2] = true;
    updateProgressBar();
});

$.when($.ajax("video3.ogv"))
.then(function () {
    videoLoaded[3] = true;
    updateProgressBar();
});

var updateProgressBar = function() {
    // iterate though the videoLoaded array and find the percentage of completed tasks
    $("#progressbar").progressbar("value", percentage);
}

所以我向您展示的 CSS 栏 .. 真正显示已加载 #main_content 的内容或示例中的视频的百分比..

希望我能说清楚，因为我的英语很糟糕。

Answer 1

为什么不做这样的事情呢？只需将其更改为 AJAX 并使用 success 作为触发器。基本上是一个永无止境的动画 gif，等待您的数据加载。

<div id="chartDiv"></div>

var chartDiv = document.getElementById("chartDiv");
var loadingImg = document.createElement("img");
var newImg = document.createElement("img");

loadingImg.src = "http://i1267.photobucket.com/albums/jj559/rizkytanjo96/loading.gif";
chartDiv.appendChild(loadingImg);

function placeLoaded() {
    chartDiv.removeChild(loadingImg);
    chartDiv.appendChild(newImg);
}

function getNew() {
    newImg.addEventListener("load", placeLoaded, false);
    newImg.src = "http://i1276.photobucket.com/albums/y462/staffpicks/Animated_GIFs/ahhhh.gif";
}

setTimeout(getNew, 10000);

在jsfiddle

或者，如果您不想要动画 gif，您可以使用 javascript 执行类似的操作。

#pwidget {
    background-color:lightgray;
    width:254px;
    padding:2px;
    -moz-border-radius:3px;
    border-radius:3px;
    text-align:left;
    border:1px solid gray;
}
#progressbar {
    width:250px;
    padding:1px;
    background-color:white;
    border:1px solid black;
    height:28px;
}
#indicator {
    width:0px;
    background-image:url("http://img827.imageshack.us/img827/269/shadedgreen.png");
    height:28px;
    margin:0;
}
#loading {
    text-align:center;
    width:250px;
}

var pwidget = {
    maxprogress: 250,
    actualprogress: 0,
    itv: 0,
    delay: 10,
    prog: function () {
        if (pwidget.actualprogress >= pwidget.maxprogress) {
            clearInterval(pwidget.itv);
            return;
        }

        var indicator = document.getElementById("indicator");

        pwidget.actualprogress += 1;
        indicator.style.width = pwidget.actualprogress + "px";

        if (pwidget.actualprogress === pwidget.maxprogress) {
            pwidget.restart();
        }
    },
    start: function () {
        pwidget.itv = setInterval(pwidget.prog, pwidget.delay);
    },
    stop: function () {
        clearInterval(pwidget.itv);
    },
    restart: function () {
        pwidget.actualprogress = 0;
        pwidget.stop();
        pwidget.start();
    },
    element: function () {
        var pwidget = document.createElement("div"),
            progressbar = document.createElement("div"),
            indicator = document.createElement("div"),
            loading = document.createElement("div");

        pwidget.id = "pwidget";
        progressbar.id = "progressbar";
        indicator.id = "indicator";
        loading.id = "loading";
        loading.textContent = "Loading ...";

        progressbar.appendChild(indicator);
        pwidget.appendChild(progressbar);
        pwidget.appendChild(loading);

        return pwidget;
    }
};

var chartDiv = document.getElementById("chartDiv");
var widget = pwidget.element();
var newImg = document.createElement("img");

function placeLoaded() {
    pwidget.stop();
    chartDiv.removeChild(widget);
    chartDiv.appendChild(newImg);
}

function getNew() {
    newImg.addEventListener("load", placeLoaded, false);
    newImg.src = "http://i1276.photobucket.com/albums/y462/staffpicks/Animated_GIFs/ahhhh.gif";
}

chartDiv.appendChild(widget);
pwidget.start();
setTimeout(getNew, 10000);

在jsfiddle

或者jQueryUI has a progress bar，你可以做与我上面的例子类似的事情。

Answer 2

大多数网站使用超过百分比的加载 gif 的部分原因是因为百分比确实不可靠。

您可能会遇到这样一种情况，即您将实际进度显示为精确的百分比，然后当需要 5 秒加载 75% 和 10 秒加载 25% 时，会发生一些事情导致流量变慢并让用户感到沮丧。有很多例子，但我会在这里停下来。

如果可能的话，我会采取超过百分之一的加载方法，不要仅仅因为这个原因而接近。只要有迹象表明正在完成的工作，用户通常都会很高兴。

[编辑] 抱歉，我花了一点时间才回到这个问题上并给你一个例子。 这是非常基本的，并且实际上取决于您如何显示此加载栏以及如何将其添加到页面中。重点在这条线上

$('<div>').progressbar({ value: false })

希望这会有所帮助。 jQuery progress bar 确实允许百分比，除非绝对需要，否则我仍会尽量避免它。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-2.0.0.js"></script>
    <script src="Scripts/jquery-ui-1.10.3.js"></script>
    <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <script>
        function show_loading()
        {
            $('<div>').dialog
                ({
                    title: 'loading...',
                    modal: true,
                    closeOnEscape: true,
                    draggable: false,
                    resizable: false
                })
            .append($('<div>').progressbar({ value: false }));
        }
    </script>
</head>
<body>
    <button id="show_loading" onclick="show_loading();">show loader</button>
</body>
</html>