Réalisation d'un loader pour précharger les images avec canvas

Version imprimable

Bonjour, je souhaite à précharger les images de mon canvas avant son utilisation.

J'ai créer la classe suivante pour réaliser cette tache :

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
 
/**
* Simple Loader class, that load resources before application start.
* This is a singleton class.
*/
var SimpleLoader = (function(){
	var constructeur = function(){
		var resources = new Array();
		var loaded = 0;
		var id = null;
		var complete = false;
 
		this.addResources = function(resource){
			if( resource instanceof Picture || resource instanceof Video || resource instanceof Sound){
				resources.push(resource);
			}
		};
 
		this.getLoaded = function(){
			return loaded;
		};
 
		this.load = function(){
			id = setInterval(draw, 1000);
			for(var i = 0; i < resources.length; i++){
				var resource = resources[i];
				if(resource instanceof Picture){
					resource.img = new Image();
					resource.img.src = resource.src;
					resource.img.onload = function(){
						loaded++;
					};
				} else if(resource instanceof Video){
					/* Load video */
				} else if(resource instanceof Sound){
					/* Load sound */
				}
			}
		};
 
		var draw = function(){
			if(loaded < resources.length){
				console.log("Chargement en cours :" +  loaded + " / " + resources.length);
			} else {
				alert("Chargement terminé");
				complete = true;
				clearInterval(id);
			}
		};
 
		this.isComplete = function(){
			return complete;
		};
	}
    var instance = null;
	return new function() {
		this.getInstance = function(){
			if(instance == null){
				instance = new constructeur();
				instance.constructeur = null;
			}
 
			return instance;
		}
	}
 
 
})();

La classe est un singleton. Les ressources sont ajoutés lors de l'instanciation d'une image.

Enfin avant la boucle du jeu , je lance :

Code:

1
2
 
 loader.load();

Seulement, le navigateur freeze pendant quelque instant , puis affiche Chargement terminé directement au lieu d'afficher le nombre de ressource chargés au fur et à mesure.

Le setInterval est la pour checker périodiquement la valeur de loaded.
merci d'avance.

03/06/2013, 18h40
Kaamo

Comme ça je pense que Chrome n'a pas le temps de redessiner l'écran car l'intervalle est trop court. Du coup, il attend. T'as essayé avec un intervalle plus long ?
Mais pourquoi se servir de ça au fait ? Appelle le 'draw' à la fin du chargement et met par défaut "Chargement en cours" à l'initialisation ?
03/06/2013, 19h40
scandinave

J'aimerai bien pouvoir afficher la progression du chargement. Dans le cas ou il y a beaucoup de ressource à charger.

Comme ici par exemple :

http://www.kevs3d.co.uk/dev/arena5/

Seulement , je n'arrive pas à voir ou dans son code, se passe le preload

bon , il semblerai que comme par miracle, j'ai réussi à obtenir quelque chose.
En tout cas, j'ai bien la console qui affiche toute les valeurs une à une.

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
this.load = function(callback){
	console.log("Loading ...");
	var i = 0;
 
	//id = setInterval(draw, 200);
	var loadResource = function(i){
		var resource = resources[i];
		if(resource instanceof Picture){
			resource.img = new Image();
			resource.img.src = resource.src;
			resource.img.onload = function(){
				loaded++;
				if(loaded == resources.length){
					console.log("loading complete");
					clearTimeout(id);
					callback;
				} else {
					console.log("chargement en cours..." + loaded + " / "+ resources.length);
					id = setTimeout(function() {loadResource(i+1)}, 0);
				}
			};
		} else if(resource instanceof Video){
			/* Load video */
		} else if(resource instanceof Sound){
			/* Load sound */
		}
	}
	loadResource(i);
};

par contre le callback n'est pas executé.

Code:

1
2
3
4
5
6
loader.load(function(){
	for(var i = 0; i < layers.length; i++){
		console.log("layer update");
		layers[i].update();
	}
});

Edit: manquait les () derrière le callback. tout fonctionne parfaitement :)