HTML5 toile barre de progression

Question

Je veux dessiner une barre de progression sur toile HTML5 alors que les actifs sont le chargement, et j'utilise ce code:

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) est appelé à partir Download(), et il fonctionne (je veux dire qu'il est l'affichage dans le journal "callback called", mais la toile est mis à jour après la fin Download() entières. donc tout le temps, je ne vois rien ... et puis la barre pleine :(

quelqu'un peut-il me aider?

Answer 1

javascript vous ne pouvez pas li sten pour le progrès classéTéléchargement, la seule chose que vous pouvez écouter est achèvement de téléchargement de fichier

alors si vous avez une liste de N images lorsque chacun se termine, vous pouvez appeler la barre de progression de mise à jour, mais vous ne pouvez pas le faire pour chaque octet qui est téléchargé

Answer 2

Vous pouvez actuellement surveiller le téléchargement avec l'événement XMLHttpRequest Level 2 progress. XHR2 est supported dans la plupart des navigateurs qui a une toile avec IE9 étant une exception.

var xhr = new XMLHttpRequest(); 


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

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