Afficher un gif loading en attendant le chargement d'une image

**gandoulfe** · 10/03/2008, 03h53

Bonsoir a tous,

J'aimerais dans une galerie d'image afficher un petit gif de loading � la place des images en attendant le chargement de celles ci.

Je ne sais pas trop comment m'y prendre donc si vous pourriez me donner un coup de main..

merci

**SpaceFrog** · 10/03/2008, 09h04

lors du click qui d�clenche le chargement de l'image il faut basculer le style display de ton gif de none � block,
puis dans un setInterval tu testes le complete de l'image...

lorsque le complete est true, tu fais un clearInterval et tu rebascules le display de l'image gif � none ...

**le_chomeur** · 10/03/2008, 09h12

Salut , voici un script assez simple que tu peux adapter :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style>
a:hover{
	background-image:tonurl;
}
a:selected{
	background-image:tonurl;
}
a:{
	text-decoration:none;
}
</style>
<script type="text/javascript">
 
function loadIt(theImage,form) {
var imageTemp = new Image()
 imageTemp.src  = theImage
	verif(imageTemp.src);
}
 
function verif(img) {
	if(img.complete)
   document.images[0].src = img.src ;
		alert("chargé");
	else
		setTimeout(function() {verif(img);}, 500);
}
 
</script>
</head>
 
<body>
<IMG SRC="imgDeLoad.gif" width="120" height="90" onLoad="">
<FORM>
<INPUT TYPE="button" VALUE="grosse image" onClick="loadIt('http://www.paris-360.com/admin/upload/tuilerie_neige hd.jpg',this.form)">
</FORM>
</body>
</html>

Bon courage

**htr999** · 10/03/2008, 12h08

salut
apparemment il y a quelques bugs dans le code de Le_Chomeur que j'ai essay� de changer un peu. voil� ce que �a donne.
au chargement de la page, l'image gif de chargement est affich�e, et quand l'image principale est charg�e, elle remplace.

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Image Loading</title>
<script type="text/javascript">
/*
essaie de remplacer ce bout de code pour voir l'effet avec les diff�rentes images.
<body onLoad="loadIt('http://www.paris-360.com/admin/upload/tuilerie_neige%20hd.jpg')">
<body onLoad="loadIt('http://aziatik8x.free.fr/diaporama/images/RoseOnTheDanceFloor1600byANDiDAS.png')">
*/
var imageTemp = new Image();

function loadIt(theImage) {
	document.getElementById("img").src = LienDeTonImageDeChargement;
	imageTemp.src = theImage;
	verif(imageTemp);
}
 
function verif(){
	if (imageTemp.complete != false){
		alert("charg�");
		document.images[0].src = imageTemp.src;
	}
	else
		setTimeout("verif()", 500);
}
</script>
</head>
<body onLoad="loadIt('http://aziatik8x.free.fr/diaporama/images/RoseOnTheDanceFloor1600byANDiDAS.png')">
<img id="img" src=""/>
</body>
</html>

bon courage