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