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);

on 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);

on jsfiddle

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

Answer 2

部分原因是大多数网站转移到加载gif超过百分比是因为百分比真的不可靠。

您可能处于这样一种情况：您将实际进度显示为精确百分比然后发生某些事情导致流量减慢并且当用户需要5s加载75％然后10s加载25％时会使用户感到沮丧。 Tere有很多例子，但我会在这里停下来。

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

[编辑]抱歉我花了一点时间回到这个并举个例子。这是非常基本的，实际上取决于您如何显示此加载栏，以了解如何将其添加到页面。专注于这一行

$('<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>

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

2 个答案: