Afficher une image toutes les 5 secondes

**Bois990** · 29/03/2012, 11h32

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 :

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

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 html :

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

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

**Bovino** · 29/03/2012, 11h36

J’ai réussi a utiliser la fonction sleep

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

setInterval(callback, 5000);

**SpaceFrog** · 29/03/2012, 11h36

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

**Bois990** · 29/03/2012, 12h01

effectivement j'ai oublié

j'ai ca aussi sur la page

:

Code :

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

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?

**Bovino** · 29/03/2012, 12h04

Beurk...

Comme indiqué, la solution passe par setTimeout ou setInterval !

**Bois990** · 29/03/2012, 12h13

Si y a plus simple je suis preneuse

**SpaceFrog** · 29/03/2012, 12h24

plus simple ?

cligner des yeux ?

**Bois990** · 29/03/2012, 12h32

Ok ma fonction sleep marche, je ne vais pas y toucher.

J'ai trouvé cette exemple d'affichage :

Code html :

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

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 ?

**_tom_** · 29/03/2012, 15h59

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 :

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

1
2
 
style="display:none;"

et pour l'afficher,

Code :

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

1
2
 
style="display:;"

Cordialement,

**Bois990** · 29/03/2012, 17h28

j'arrive à maitriser la fonction setTimeout

Code :

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

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 :

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

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.

**SpaceFrog** · 29/03/2012, 18h52

dommage de l'utiliser avec document.write

**_tom_** · 29/03/2012, 19h15

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

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

**SpaceFrog** · 29/03/2012, 19h41

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

**_tom_** · 29/03/2012, 19h50

Effectivement ici c'est une boucle autant pour moi ^^

**Bois990** · 30/03/2012, 08h57

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

Afficher une image toutes les 5 secondes

JavaScript

Discussions similaires

Partager

Partager