réactualisation écran canvas
Bonjour,
je cherche à implémenter un loader avec Canva pour précharger mes images.
Les images se charge bien, mais au lieu de voir ce compteur s'incrémenter, la page se fige quelque instant et affiche le nombre total d'images chargées à la fin.
Voici le code du loader.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
function SimpleLoader(){
this.ressources;
this.canvas;
this.ctx;
}
SimpleLoader.prototype.init = function (ressources, canvas, ctx){
this.ressources = ressources;
this.canvas = canvas;
this.ctx = ctx;
};
SimpleLoader.prototype.draw = function (){
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.ctx.fillStyle = "black";
this.ctx.fillRect(0,0,this.canvas.width, this.canvas.height)
for(var i = 0; i < this.ressources.length; i++){
var data = this.ressources[i];
if(data instanceof Picture){
var drawLoader = function(nbLoad, canvas, ctx){
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "black";
ctx.fillRect(0,0, canvas.width, canvas.height);
ctx.fillStyle = "white";
ctx.fillText("Chargement en cours ... " + Number(nbLoad) +"/"+ Number(100), canvas.width/2, 100 );
}
data.img = new Image();
data.img.src = data.src;
data.img.onload = drawLoader(Number(i)+1, this.canvas, this.ctx); //Update loader to reflect picture loading progress
} else if(data instanceof Animation){
/* Load animation */
} else if(data instanceof Video){
/* Load video */
} else if(data instanceof Sound){
/* Load sound */
}else {
}
}
}; |
Code:
1
2
3
4
|
var loader = new Loader(this.loader);
loader.init(this.pictures, this.canvas, this.ctx );
loader.draw(); |
Quelqu'un à une idée?
