Question

我正在尝试显示HTML5进度元素以显示大图像文件的下载进度。

我已经检查了一些已经发布在这个论坛上的类似问题的答案，但他们似乎没有直接回答这个问题（或者更可能只是我的无知），或者他们非常技术性，因此超出了我。< / p>

我已经下载了一个显示基本方法的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>

Answer 1

如果您要跟踪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

HTML5 Progress Element Scripting

1 个答案: