Comment afficher une nouvelle image toutes les 2 secondes ? [Débutant(e)]

**islogged** · 30/12/2012, 09h34

Bonjour,

J'ai conscience que mon pb reste simple, malgré cela je n'arrive pas à trouver de solution en javascript.

Je cherche à afficher une image, puis après une temporisation de 2sec une autre, puis encore 2sec une nouvelle, et ainsi de suite ...

Un exemple de ce qui ne marche pas :

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
<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'/>
        <title></title>
    </head>
 
    <body>
		<div id='content'>
		</div>
 
		<script>
			var picture = '<img src=\'lambda.gif\'>';
			var mostPicture = '';
 
			for( var i = 0; i < 5; i++ )
			{
				mostPicture = mostPicture + picture;
				setTimeout( 'screen( mostPicture )', 2000 );
			}
 
			function screen( contenue )
			{
				document.getElementById( 'content' ).innerHTML = contenue;
				alert( 'pause : ' + contenue );
			}
		</script>	
	</body>
</html>

Un autre exemple de ce qui ne marche pas :

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
<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'/>
        <title></title>
    </head>
 
    <body>
		<div id='content'>
		</div>
 
		<script>
			var picture = '<img src=\'lambda.gif\'>';
			var mostPicture = '';
 
			for( var i = 0; i < 5; i++ )
			{
				mostPicture = mostPicture + picture;
				screen( mostPicture );
			}
 
			function screen( contenue )
			{
				document.getElementById( 'content' ).innerHTML = contenue;
 
				alert( 'pause : ' + contenue );
				delay( 2000 );
			}
 
			function delay( ms )
			{
				var end = new Date().getTime() + ms;
				while ( end > new Date().getTime() );
			}
		</script>	
	</body>
</html>

Dans le 1ier cas, setTimeout() semble mener sa vie indépendamment de ma boucle for().

Dans le 2nd cas, le Navigateur (n'affiche/n'actualise) pas le contenu de mon document.getElementById( 'content' ).innerHTML lors des différentes pauses.
Mais traite le tout à la fin !!!

J'ai essayer aussi d'autres méthodes sans plus de succès ...

Un grand merci à tous ceux qui pourront m'aider dans mon problème ...
Merci

**danielhagnoul** · 30/12/2012, 11h12

Bonjour

En jQuery j'écrirais simplement :

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
 
var jObjArticle = $( "article:first" ),
	tabImages = [
		"http://danielhagnoul.developpez.com/images/boule4.png",
		"http://danielhagnoul.developpez.com/images/boule1.png",
		"http://danielhagnoul.developpez.com/images/boule2.png",
		"http://danielhagnoul.developpez.com/images/boule3.png",
		"http://danielhagnoul.developpez.com/images/boule7.png"					
	],
	i = 0,
	jObjPicture = $( "<img/>", {
		"src" : tabImages[ i ]
	}).appendTo( jObjArticle ),
	objInterval = setInterval( function(){
		if ( i > 4 ) clearInterval( objInterval );
		jObjPicture.attr( "src", tabImages[ i++ ] );
	}, 2000 );

Une bonne âme vous convertira la chose en Vanilla JS.

Pour tester il suffit de copier-coller le code de ma page de test :

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<style>
		.hyphens { -moz-hyphens:auto; -webkit-hyphens:auto; -ms-hyphens:auto; hyphens:auto; }
		article { display:table-cell; text-align:justify; border:0.1rem dotted grey; }
		.table1 { border-collapse:separate; border-spacing:3rem; }
		.ligne { display:table-row; }
 
		.table1 .ligne { min-height:25rem; }
		.table1 article { width:40rem; vertical-align:top; }
 
		/* TEST */
 
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>Titre 2</h2>
		</hgroup>
	</header>
	<section class="conteneur">				
		<section class="table1">
			<section class="ligne">
				<article>
 
				</article>
				<article>
 
				</article>
			</section>
		</section>
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2012-12-23T21:12:59.904+01:00" pubdate>2012-12-23T21:12:59.904+01:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
	<script src="http://danielhagnoul.developpez.com/lib/raphael-min.js"></script>
	<script src="http://code.jquery.com/jquery-1.9.0b1.js"></script>
	<!--<script src="http://code.jquery.com/jquery-migrate-1.0.0b1.js"></script>-->
	<script src="http://code.jquery.com/color/jquery.color-2.1.1.min.js"></script>
	<script src="http://danielhagnoul.developpez.com/lib/dvjh/base.js"></script>
	<script>
		"use strict";
 
		$(function(){
 
		});
 
		$( window ).load( function(){
 
			var jObjArticle = $( "article:first" ),
				tabImages = [
					"http://danielhagnoul.developpez.com/images/boule4.png",
					"http://danielhagnoul.developpez.com/images/boule1.png",
					"http://danielhagnoul.developpez.com/images/boule2.png",
					"http://danielhagnoul.developpez.com/images/boule3.png",
					"http://danielhagnoul.developpez.com/images/boule7.png"					
				],
				i = 0,
				jObjPicture = $( "<img/>", {
					"src" : tabImages[ i ]
				}).appendTo( jObjArticle ),
				objInterval = setInterval( function(){
					if ( i > 4 ) clearInterval( objInterval );
					jObjPicture.attr( "src", tabImages[ i++ ] );
				}, 2000 );
 
		});
	</script>
</body>
</html>

**islogged** · 30/12/2012, 12h13

Bonjour et merci pour votre réponse,

Je ne doute pas de la validité de votre code ...
Je cherche juste à écrire une Fonctionnalité simple en Javascript simple.

Donc exit les jQuery, Vanilla Js, frameworks, et autres library ... merci

**Bovino** · 30/12/2012, 14h05

Envoyé par islogged

Donc exit les jQuery, Vanilla Js, frameworks, et autres library

D'accord... donc pas de bibliothèque et pas de vanilla JavaScript... Ca va être compliqué de t'aider alors...

Pour ta culture, on appelle vanilla JavaScript l'utilisation de JavaScript natif, donc sans librairie.

**Bovino** · 30/12/2012, 14h07

Code :

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

1
2
3
timer=setTimeout(function(){
    iter();
},1000);

qui s'écrit aussi simplement

Code :

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

timer = setTimeout(iter, 1000);

**NoSmoking** · 30/12/2012, 15h42

Bonjour,
je reviendrais sur le premier script, repris ci dessous

Code :

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

1
2
3
4
5
6
7
8
9
10
var picture = '<img src=\'lambda.gif\'>';
var mostPicture = '';
for (var i = 0; i < 5; i++) {
  mostPicture = mostPicture + picture;
  setTimeout('screen( mostPicture )', 2000);
}
function screen(contenue) {
  document.getElementById('content').innerHTML = contenue;
  alert('pause : ' + contenue);
}

Il est préférable d'éviter de passer sous forme de chaîne le premier paramètre à la méthode setTimeout, il sera interprété à chaque fois, regardes ce qui a été proposé.

La nomination d'une fonction screen ne me parait pas judicieuse attendu que l'objet window possède déjà son propre objet screen. En allant un peu plus loin tu peux même mettre le code directement dans une fonction anonyme dans ton setTimeout, et donc te passer de la fonction.

Dans ta boucle tu n'utilises pas le compteur i pour décaler dans le temps l'appel de tes fonctions, ce qui fait quelles sont toutes exécuter "après" 2s, il te faudrait à minima faire un ( i* 2000), dans ce cas la première s’exécutera immédiatement (0*2000 =0).

Une autre question a ce poser est que vaudra mostPicture lors de l’Exécution de la fonction et ce du fait que tu concatène à chaque itération, la variable vaudra donc
<img src='lambda.gif'><img src='lambda.gif'><img src='lambda.gif'><img src='lambda.gif'><img src='lambda.gif'>.
Pour résoudre ce problème il te faut passer par un "closure" pour n'afficher que ce que tu souhaites.

En résumé la fonction pourrait ressembler à cela

Code :

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

1
2
3
4
5
6
7
8
9
10
11
var picture = '<img src=\'lambda.gif\'>';
for (var i = 0; i < 5; i++){
  mostPicture = mostPicture + picture;
  (function (param){             // début de la "closure" avec passage de paramètre
    setTimeout(function(){       // corps de la fonction qui sera exécutée
      // on aurait pu écrire cela
      // fctScreen(param);
      document.getElementById('content').innerHTML = param;
    }, (i * 2000));              // déclenchement retardé
  })(mostPicture);               // fin de la "closure" avec passage en paramètre de mostPicture
}

Bon d'autres alternatives sont possibles surtout si tu ne veux pas afficher plusieurs fois la même image, mais le fond de la fonction restera le même.

**SylvainPV** · 30/12/2012, 15h45

J'améliorerais ce code de cette façon :
-n'utiliser qu'une seule image et changer son attribut src plutôt que d'utiliser innerHTML
-prendre en compte le temps de chargement des images

Voilà ce à quoi je suis arrivé :

Code html :

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

1
2
3
4
5
6
 
<body>
        <div id='content'>
            <img id="slideshow" />
        </div>
</body>

Code js :

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
 
  var pictures = [
        "http://melastardu13.m.e.pic.centerblog.net/1ccd538b.jpg",
        "http://melastardu13.m.e.pic.centerblog.net/f588adc7.jpg",
        "http://melastardu13.m.e.pic.centerblog.net/a9fa710f.jpg"
    ];
    var img = document.getElementById("slideshow");
    var currentIndex = 0;
    var slideshowTimer;
 
    (function nextImg(){        
        slideshowTimer = Date.now();
        img.src=pictures[currentIndex];
        img.onload=function(){
            currentIndex = (currentIndex + 1) % pictures.length;
            var remainingTime = 2000 - (Date.now() - slideshowTimer);
            if(remainingTime>0){ setTimeout(nextImg, remainingTime); }
            else { nextImg(); }
        };        
    })();

Démo ici : http://jsfiddle.net/gRNtq/

**sdamart** · 30/12/2012, 12h21

Dans le premier cas tu declenche un setTimeout dans une boucle "for"
pas très malin : Il déclenche autant de setTimeout que d'itération.
L'idéal et de créer une fonction setTimeout qui appel une fonction itérative

démonstration

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
var timer={}
index=-1
function iter(){
//stoppe le timer pour le temps du traitement
clearTimeout(timer);
if(array_image[index+1]!=undefined){
index++
}else
index=0;
//Affiche l'image
document.getElementById("ID_image").src=array_image[index];
//re-déclenche le timer
timer=setTimeout(function(){iter();},1000);
}
//Déclenche le premier timer
timer=setTimeout(function(){iter();},1000);

Et voila le travail bonne chance

**John Blobsmith** · 30/12/2012, 13h52

On peut enlever le setTimeout en dehors de la fonction iter().
Ne pas oublier de déclarer le tableau array_image.

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
 
var array_image = ['image1.jpg','image2.jpg','image3.jpg','image4.jpg'];
            var timer={}
            index=-1
            function iter(){
                //stoppe le timer pour le temps du traitement
                clearTimeout(timer);
                if(array_image[index+1]!=undefined){
                    index++
                }else
                    index=0;
                //Affiche l'image
                      document.getElementById("ID_image").src=array_image[index];
                //re-déclenche le timer
                timer=setTimeout(function(){
                    iter();
                },1000);
            }
            iter();

Comment afficher une nouvelle image toutes les 2 secondes ? [Débutant(e)]

JavaScript

Vue hybride

Discussions similaires

Partager

Partager