Vérification du chargement d'une image

**plumo** · 02/11/2007, 20h34

Bonjour! je suis encore débutant en javascript et je me trouve devant un petit problème qui aura au moins eu le mérite de me faire réfléchir.

Mon but est d'afficher un petit gif animé pendant le chargement d'une page. naturellement j'ai pensé a une boucle pour vérifier en continu si l'image était chargée seuleument la boucle devient infinie...

Cela donnait à peu près ça:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
While ( !MonImage.complete )
   {
        if ( MonImage.complete )
          {
              break;
           }
   }

Bien évidemment je vois qu'il y a un truc qui va pas mais je suis completement perdu.

donc en désespor de cause, je me suis penché sur un "bidouillage" pour remplacer cette boucle. Voila le script complet (au apssage s'il ya des énormités merci de m'en faire part cela ne pourra que m'être bénéfique!).

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
function pop (param) {
 
 
	div = document.getElementById('imgGalerie');
 
	if (div.hasChildNodes() ) //on vide la div si il y a deja du contenu
		{
			div.removeChild(div.lastChild);
		}
 
 
	//création de l'image
	param2 = param;
	Nimg = document.createElement('img');
	var src = param.alt;
	var W1 = param.width;
	var H1 = param.height;
 
 
	Nimg.setAttribute("src", "../images/galerie/grandes/" +src+ ".jpg");
	Nimg.setAttribute("onclick", "window.open(this.src, 'Galerie', 'location=no'); return false;");
 
if (Nimg.complete) // si le chargement est fini, on affiche l'image en réduisant sa taille
	{
	var W = Nimg.width/2;
	var H = Nimg.height/2;
 
	Nimg.setAttribute('width', W);
	Nimg.setAttribute('height', H);
 
	div.appendChild(Nimg); 
	}
else {  //sinon on fait apparaitre le loader
	div.innerHTML='<img src="../ui/images/loader.gif" alt="" />';
	setTimeout('verif()', 100); //et on lance un eptit décompte pour relancer la vérification
	}
}
 
function verif() {
 
	pop(param2); //on relance juste la fonction précédente
 
}