1

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

我正在尝试使用这个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 的内容或示例中的视频的百分比..

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

4

2 回答 2

3

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

于 2013-04-24T00:21:28.430 回答
0

Part of the reason most sites have moved to a loading gif over a percent is because the percent is really unreliable.

You could possibly be in a situation where you are showing the actual progress as an exact percent then something happens causing traffic to slow down and frustrates the user when it take 5s to load 75% and then 10s to load 25%. Tere are plenty of examples but I will stop here.

If it is at all possible I would take a loading approach over a percent don't approach for this reason alone. As long as there is an indication of work being done users are generally happy.

[EDIT] sorry it took me a little bit to get back to this and give you an example. this is really basic and really depends on how you are showing this loading bar as to how you will add it to the page. Focus is on this line

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

hope this helps. The jQuery progress bar does allow for percentage, still i would try to avoid it unless its absolutely required. 

<!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>
于 2013-04-24T00:02:53.860 回答