Afficher une image toutes les 5 secondes

Version imprimable

29/03/2012, 11h32
Bois990

Afficher une image toutes les 5 secondes
Bonjour,
je cherche a faire un page html qui affiche une 20 ene d'images, je voudrais que les images s’affichent une par une toutes les 5 secondes.
le but est d’étaler les demandes d’images au serveur pour ne pas le surcharger.
j'ai pas trouver comment faire une sorte de fonction sleep en html donc je me tourne vers le javascript.
J’ai réussi a utiliser la fonction sleep mais pas a afficher les images en Javascript

l’idée serait de faire :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <script type="text/javascript"> afficher image sleep(5000) afficher image sleep(5000) afficher image </script>
l’affichage de l’image doit etre en javascript et pas en html sinon l’exécution est parallélisé et ca ne respecte plus l’ordre des instructions.

J’ai testé :

Code:

<img src="carte2.JPG" width="247" height="192" border="0" alt="">

Mais ca ne fonctionne pas.
Je cherche quelque chose d’assez simple.

Quelqu’un a une idée ?
29/03/2012, 11h36
Bovino

Citation:

J’ai réussi a utiliser la fonction sleep

:koi:
Etonnant vu qu'elle n'existe pas en JavaScript...

setInterval(callback, 5000);
29/03/2012, 11h36
SpaceFrog

ce n'est pas sleep qui'l faut utiliser mais setInterval ou setTimeout

sleep

effectivement j'ai oublié

j'ai ca aussi sur la page ;) :
Code:

1 2 3 4 5 6 7 8 9 10 <head> <script type="text/javascript"> function sleep(delay) { var start = new Date().getTime(); while (new Date().getTime() < start + delay); } </script> </head>
voila pourquoi j'avais une fonction sleep et qu'elle fonctionnait :)

et pour l'affichage de l'image?

29/03/2012, 12h04
Bovino

Beurk... :vomi:

Comme indiqué, la solution passe par setTimeout ou setInterval !
29/03/2012, 12h13
Bois990

solution

Si y a plus simple je suis preneuse
29/03/2012, 12h24
SpaceFrog

plus simple ?

cligner des yeux ?
29/03/2012, 12h32
Bois990
Ok ma fonction sleep marche, je ne vais pas y toucher.

J'ai trouvé cette exemple d'affichage :
Code:

1 2 3 <div id="conteneurImg"> <img src="grande_image1.jpg" alt="" id="grandeImage1" style="display:none;" /> </div>
Cette syntaxe ne fonctionne pas. Faut-il rajouter quelque chose dans head ?
29/03/2012, 15h59
_tom_
Bonjour,

Comme dit précédemment, je ne peux que te recommander fortement l'utilisation des méthodes setInterval ou setTimeout au lieu d'une méthode "sleep" cutomisée... c'est plus propre ;)

Sinon pour cacher l'image, tu peux mettre dans ta balise img
Code:

1 2 style="display:none;"
et pour l'afficher,
Code:

1 2 style="display:;"
Cordialement,

j'arrive à maitriser la fonction setTimeout :mrgreen::mrgreen::mrgreen:
Code:

1 2 3 <script type="text/javascript"> setTimeout("window.alert('Hello!')", 2000); </script>
maintenant pour l'image j'aimerai bien faire un truc comme ça:
Code:

1 2 3 4 <script type="text/javascript"> setTimeout("document.write(<img src='carte.jpg'>)", 2000); setTimeout("document.write(<img src='carte2.jpg'>)", 2000); </script>
j'ai la syntaxe n'est pas correcte.

29/03/2012, 18h52
SpaceFrog

dommage de l'utiliser avec document.write :aie:

Voici un bout de code utilisant la méthode setTimout ainsi que la propriété CSS display pour afficher/cacher les images.

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
 
<html>
    <head>
        <meta charset="utf-8" />
		<link rel="stylesheet" href="style.css" />	
		<script>
			function start() {
				setTimeout("changeImage()", 2000);
			}
 
			function changeImage() {
				if(document.getElementById("img1").style.display == "none") {
					document.getElementById("img1").style.display = "";
					document.getElementById("img2").style.display = "none";
				} else {
					document.getElementById("img2").style.display = "";
					document.getElementById("img1").style.display = "none";
				}
				start();
			}
		</script>
    </head>
 
    <body onload="start()">
		<div>
			<img id="img1" src="img1.jpg" style="display:;"/>
			<img id="img2" src="img2.jpg" style="display:none;"/>
		</div>
    </body>
</html>

A toi de l'adapter à ta guise ;)

29/03/2012, 19h41
SpaceFrog

setTimeout => un délai
setInterval => une repétition de délais

Je n'ai jamais compris l'acharnement de certains à utiliser un setTimeout faire des délais en boucle ...
29/03/2012, 19h50
_tom_

Effectivement ici c'est une boucle autant pour moi ^^
30/03/2012, 08h57
Bois990

Merci Tom ca me donne un bon exemple sur l'affichage des images.