HTML5キャンバスプログレスバー

Question

：

Assets.Download(function(_loaded) { 
    console.log("callback called");//its displayed in log 
    ctx.beginPath(); 
    ctx.rect(0, 0, _loaded * 500, 50); 
    ctx.fillStyle = "#8ED6FF"; 
    ctx.fill(); 
    ctx.lineWidth = 5; 
    ctx.strokeStyle = "black"; 
    ctx.stroke(); 
    sleep(1000); 
}) 

function(_loaded)は（私が意味することはで表示されていますDownload()から呼び出され、それが動作しますログ"callback called"が、キャンバス全体Download()終了後に更新されています。だから私は何も見えないすべての時間...そして本格的なバー:(

は、誰も私を助けることができますか？

Answer 1

あなたはLiすることはできませんJavaScriptであなたが聴くことができるのはファイルダウンロードの完了です。

です。それぞれが終了するとN個の画像のリストがあるので、ダウンロードの進行状況バーを呼び出すことはできますが、ダウンロードされた各バイト

Answer 2

実際には、XMLHttpRequestレベル2 progressイベントでダウンロードを監視できます。 XHR2はIE9が例外であるキャンバスを持つほとんどのブラウザでsupportedです。

var xhr = new XMLHttpRequest(); 


xhr.addEventListener('progress', function(event) { 

    console.log(event.loaded/event.total); 
}, 
false);