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

Version imprimable

10/03/2008, 03h53
gandoulfe

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

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 ;)
10/03/2008, 09h04
SpaceFrog

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 ...

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

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
 
<!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 :)

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:

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

10/03/2008, 13h26
gandoulfe

Merci pour vos reponse je vai tester ca dans l'apres midi .

:mouarf:
10/03/2008, 14h11
le_chomeur

désolé :oops: j'ai récupéré mon code habituel d'exemple et l'ai adapté en live ^^
10/03/2008, 14h37
htr999

mais pas de problème t'en fais pas :mouarf: moi aussi justement j'en ai besoin. j'ai juste modifié pour que ça soit plus propre. merci à toi pour l'idée Image.complete :king:
10/03/2008, 15h11
SpaceFrog

:roll: :pleure:
10/03/2008, 17h59
gandoulfe

Merci pour votre aide. Je n'ai pas le temps aujourdhui mais vous m'avez donné assez d'éléments pour que je puisse me débrouiller par la suite.

:P