建立一個進度條加載顯示前

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

讓我告訴你..真的顯示已#main_content的內容或類似視頻的加載％的上CSS吧在例子..

希望我讓自己清楚，因爲我的英語很糟糕。

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

上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 has a progress bar，你可以做類似的事情我上面的例子。

Answer 2

部分原因大多數網站已經轉移到一個百分比的加載gif是因爲百分比是真的不可靠。

您可能處於這樣一種情況，即您將實際進度顯示爲確切的百分比，然後會導致流量減慢，並在用戶需要5秒加載75％，然後10秒加載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>