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

Building a Progress bar for Loading everything before display

本文关键字：显示 加载 用于 一个 构建      更新时间：2023-09-26

你好，我真的试着搜索之前问…我试图使用jquery的进度条，我发现了很多信息，问题是大多数的例子只是"动画"我的意思是，他们没有真正显示加载过程的百分比。而我却找不到办法。

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

与本题的正确答案混合。如何创建一个jQuery加载栏?(如flash网站上使用的)

但是我就是无法合并

$.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或视频中已加载内容的百分比，如示例..

希望我能说清楚，因为我的英语很差

为什么不这样做呢?只需将其更改为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有一个进度条，你可以做类似的事情，我上面的例子

大多数网站之所以采用加载gif而不是百分比，部分原因是百分比确实不可靠。

你可能会遇到这样的情况，当你以精确的百分比显示实际进度时，发生了一些事情，导致流量减慢，当加载75%需要5秒，加载25%需要10秒时，用户会感到沮丧。有很多例子，但我就到此为止。

如果可能的话，我会采取加载方法，而不是仅仅因为这个原因。只要有工作完成的迹象，用户通常是满意的。

[EDIT]抱歉，我花了一点时间才回到这里，给你们一个例子。这是非常基本的，这取决于你如何显示这个加载条，以及你将如何将它添加到页面上。重点在这一行

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

希望这对你有帮助。jQuery进度条确实允许百分比，但除非绝对必要，否则我会尽量避免使用它。

<!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>
相关文章：