构建一个进度条,用于在显示之前加载所有内容 [英] 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);
或者,如果你不想要一个动画的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);
或 jQueryUI有进度条,您可以对上面的示例执行类似的操作。
Or jQueryUI has a progress bar and you could do a similar thing to my example above.
这篇关于构建一个进度条,用于在显示之前加载所有内容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!