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

你好我真的尝试和搜索之前问…我试图使用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内容的％或像示例中的video。

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

Answer 1

为什么不做这样的事情？ 只需将其更改为AJAX并将success用作触发器即可。 在等待数据加载时，基本上是一个永无止境的动画gif。

 
 var chartDiv = document.getElementById("chartDiv"); var loadingImg = document.createElement("img"); var newImg = document.createElement("img"); loadingImg.src = "http://sofzh.miximages.com/javascript/loading.gif"; chartDiv.appendChild(loadingImg); function placeLoaded() { chartDiv.removeChild(loadingImg); chartDiv.appendChild(newImg); } function getNew() { newImg.addEventListener("load", placeLoaded, false); newImg.src = "http://sofzh.miximages.com/javascript/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://sofzh.miximages.com/javascript/ahhhh.gif"; } chartDiv.appendChild(widget); pwidget.start(); setTimeout(getNew, 10000); 

在jsfiddle

或者jQueryUI有一个进度条 ，你可以对我上面的例子做类似的事情。

Answer 2

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

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

如果可能的话，我会采用超过百分之一的加载方法，不要仅仅因为这个原因而接近。 只要有工作指示，用户通常会感到高兴。

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

 $('
').progressbar({ value: false }) 

希望这可以帮助。 jQuery进度条确实允许百分比，仍然我会尽量避免它，除非它绝对需要。

           show loader