HTML5 холст индикатор выполнения

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

На самом деле вы можете отслеживать загрузку с событием XMLHttpRequest Level 2 progress. XHR2 поддерживается в большинстве браузеров, в которых есть холст, за исключением IE9.

var xhr = new XMLHttpRequest();


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

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

Answer 2

в javascript вы не можете прослушивать прогресс загрузки файла, единственное, что вы можете слушать - это завершение загрузки файла

поэтому, если у вас есть список из N изображений, когда каждое из них заканчивается, вы можете вызвать индикатор выполнения обновления, но вы не можете сделать это для каждого загруженного байта