Question

我想在加载资源时在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()结束后更新。所以所有的时间我什么也看不见......然后是完整的酒吧:(

任何人都可以帮助我吗？

Answer 1

在javascript中你无法监听文件下载进度，你唯一能听的就是文件下载完成

所以如果你有一个N个图像的列表，每个完成后你可以调用更新进度条，但你不能为每个下载的字节做这个

Answer 2

您实际上可以使用XMLHttpRequest Level 2 progress事件监控下载。在大多数浏览器中，XHR2是supported，其中IE9是一个例外的画布。

var xhr = new XMLHttpRequest();


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

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

HTML5画布进度条

2 个答案: