构建一个进度条，用于在显示之前加载所有内容 [英] Building a Progress bar for Loading everything before display

问题描述

你真的尝试和搜索之前问..我试图使用jquery的进度条，我发现了很多信息，问题是大多数的例子只是动画我的意思，他们不真正显示

Hello i really try and search before ask.. Im trying to use jquery for a progress bar, i found a lot of info, the problem is most of the examples are just "animations" i mean, they dont really display the %, of the loading process.. and i cant find a way to do it.

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

混合使用此问题的正确答案。 如何创建jQuery加载吧？ （类似Flash网站上使用的）

Mixed With the correct answer on this question. 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上的bar显示你真的显示％已加载#main_content的内容或像例子中的视频。

So the bar on CSS that i show you .. really display the % that has been loading of the content of #main_content or a video like in example..

希望我让自己清楚，因为我的英语非常糟糕。

Hope i make my self clear because my english its very bad.

推荐答案

为什么不这样做呢？只需改变它的AJAX，并使用成功作为触发器。

Why not do something like this? Just change it for AJAX and use success as your trigger. Basically a never ending animated gif while waiting for you data loading.

<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做这样的事情。

Alternatively, if you don't want an animated gif, you could do something like this with 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有进度条，您可以对上面的示例执行类似的操作。

Or jQueryUI has a progress bar and you could do a similar thing to my example above.

这篇关于构建一个进度条，用于在显示之前加载所有内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！