HTML5 Progress Element腳本

我試圖顯示HTML5進度元素來顯示大圖像文件的下載進度。HTML5 Progress Element腳本

我已經檢查了幾個已發佈在論壇上的類似問題的答案，但他們似乎並沒有直接回答這個問題（或者更可能只是我的無知），或者他們技術性很強，因此超越了我的方式。

我已經下載了顯示基本方法的HTML5/JavaScript示例文件（請參閱下面的代碼），但我無法弄清楚如何將此腳本鏈接到我的圖像下載。

任何意見將不勝感激。

<!DOCTYPE html> 
<html> 
<head> 
<title>Developer Drive | Displaying the Progress of Tasks with HTML5 | Demo</title> 
<script type="text/javascript"> 

var currProgress = 0; 

var done = false; 

var total = 100; 

function startProgress() { 

var prBar = document.getElementById("prog"); 

var startButt = document.getElementById("startBtn"); 

var val = document.getElementById("numValue"); 

startButt.disabled=true; 

prBar.value = currProgress; 

val.innerHTML = Math.round((currProgress/total)*100)+"%"; 

currProgress++; 

if(currProgress>100) done=true; 

if(!done) 
setTimeout("startProgress()", 100); 

else  
{ 
document.getElementById("startBtn").disabled = false; 
done = false; 
currProgress = 0; 
} 
} 
</script> 
</head> 
<body> 

<p>Task progress:</p> 
<progress id="prog" value="0" max="100"></progress> 
<input id="startBtn" type="button" value="start" onclick="startProgress()"/> 
<div id="numValue">0%</div> 

</body> 
</html>

來源

2013-02-22 Nick

如果您正在尋找跟蹤XMLHttpRequest的進度（可以加載圖像，或其他任何東西），Adobe has a great example there。 按Ctrl + U是你的朋友:)

基本上，你要做到這一點：

var xhr = new XMLHttpRequest(); 
xhr.onprogress = function(e){ 

    // This tests whether the server gave you the total number of bytes that were 
    // about to be sent; some servers don't (this is config-dependend), and 
    // without that information you can't know how far along you are 
    if (e.lengthComputable) 
    { 

    // e.loaded contains how much was loaded, while e.total contains 
    // the total size of the file, so you'll want to get the quotient: 
    progressBar.value = e.loaded/e.total * 100; 

    } 
    else 
    { 
    // You can't know the progress in term of percents, but you could still 
    // do something with `e.loaded` 
    } 
};

Mozilla's Developer site has some more details，如果你想看看有什麼可以做的。

希望爲你:)

PS夠了：現在我想想，我看不出有什麼理由不使用e.total爲progressBar.max，並且只需按e.loaded到progressBar.value

來源

2013-03-05 21:24:44 1ace

嘿1ace ，謝謝！我已經檢查過Adobe（不知道我錯過了這些，我在網上查了一下）和Mozilla。已經測試過你的建議......完美地工作。非常感激！ – Nick 2013-03-08 02:49:40

HTML5 Progress Element腳本

回答

相關問題