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

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

, так что если у вас есть список 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);