HTML5畫布進度條

我希望藉助HTML5畫布進度條，而資產被加載，我用這個代碼：HTML5畫布進度條

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()結束後更新。因此，所有的時間，我什麼也看不到......然後滿條:(

誰能幫我？

來源

2012-03-26 user1294051

在JavaScript中你不能立你可以聽的唯一的事情是文件下載完成

所以如果你有一個N圖像清單，當每個完成時，你可以調用更新進度條，但你不能做每個字節下載

來源

2012-03-27 14:22:43 samccone

這對於HTML5之前的瀏覽器是正確的，但並不支持那些支持HTML5的瀏覽器。 – 2012-03-27 14:31:02

您實際上可以使用XMLHttpRequest Level 2 progress事件監視下載。在大多數瀏覽器中，XHR2是supported，其中IE9是一個例外。

var xhr = new XMLHttpRequest(); 


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

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

來源

2012-03-27 14:28:16

HTML5畫布進度條

回答

相關問題