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画布进度条

回答

相关问题