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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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.