1

大きな画像ファイルのダウンロードの進行状況を表示する HTML5 の進行状況要素を表示しようとしています。

このフォーラムにすでに投稿されている同様の質問に対するいくつかの回答を確認しましたが、質問に直接回答していないようです (または、私の無知である可能性が高い)。

基本的な方法 (以下のコードを参照) を示す 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>
4

1 に答える 1

3

XMLHttpRequest（画像の読み込みなど）の進行状況を追跡する場合は、 Adobeに優れた例があります。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の開発者サイトに詳細があります。

それで十分だといいのですが:)

PS：考えてみると、e.totalasを使わない理由は見当たらずprogressBar.max、単に押し込むだけですe.loaded。progressBar.value

于 2013-03-05T21:24:44.957 に答える