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

**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();

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

**islogged** · 31/12/2012, 20h21

Bonsoir,

Merci pour vos réponses, qui m'ont pas mal aidé!

J'essaie de tenir compte de tous vos conseils, et suite à vos réponses encore quelques questions ce pose à moi.

Code :

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

var timer={}

Q1: Que signifie le type { accolade } en javascript ?

-----

n'utiliser qu'une seule image et changer son attribut src plutôt que d'utiliser innerHTML

Je veux incrémenter les images à l'affichage, d'ailleurs à ce sujet voici maintenant mon code [ qui marche ] grâce à votre aide.

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
<!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 = '';
			var timer = {};
			var count = 0;
 
			timer = setTimeout( iter, 0 );			
 
			function iter()
			{
				clearTimeout( timer );
 
				if( count < 5 )
				{
					mostPicture = mostPicture + picture;
					document.getElementById( 'content' ).innerHTML = mostPicture;
					count++;
 
					timer = setTimeout( iter, 1000 );
				}
			}
		</script>	
	</body>
</html>

Mais je me demande Q2: si les images (n-1), (n-2), (n-3) et (n-4) sont recharger (en download) à chaque fois par le navigateur, ou si il y une sorte de cache de manière à que seule la dernière image soit downloadé ... (ce que je cherche)

-----

La nomination d'une fonction screen ne me parait pas judicieuse attendu que l'objet window possède déjà son propre objet screen.

Comment je peux le savoir, j'utilise souvent un fonction screen ça ne m'a jamais poser de "pb parasites", Q3: Quels sont les risques ?

Merci

**Bovino** · 01/01/2013, 09h43

Q1: Que signifie le type { accolade } en javascript ?

Il existe deux façons pour définir des types de variables en JavaScript.
Une forme "constructeur", utilisant le mot clé new :

Code :

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

1
2
3
4
5
6
var bool = new Boolean();
var nb = new Number();
var str = new String();
var tab = new Array();
var obj = new Object();
var reg = new RegExp();

ces constructeurs font appel à des fonctions prédéfinies que l'on peut comparer à des classes (bien que ce n'en sont pas à proprement parler).
A coté de cela, il existe une façon "littérale" de déclarer les types :

Code :

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

1
2
3
4
5
6
var bool = new Boolean();
var nb = 0;
var str = '';
var tab = [];
var obj = {};
var reg = /reg/;  // on remarquera qu'il n'est pas possible de déclarer une regexp vide

cette notation est en général recommandée car plus concise et moins gourmande en ressources.

Q2: si les images (n-1), (n-2), (n-3) et (n-4) sont recharger (en download) à chaque fois par le navigateur, ou si il y une sorte de cache de manière à que seule la dernière image soit downloadé ...

Si les images sont déjà en cache, alors ce sont celles présentes dans le cache qui sont utilisées.

Q3: Quels sont les risques ?

Tout simplement tu n'auras plus accès à l'objet natif screen...
Exécute le script suivant dans une console pour comprendre

Code :

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

1
2
3
4
5
console.log(screen.width);
function screen(){
    return 'toto';
}
console.log(screen, screen.width);

**islogged** · 01/01/2013, 10h25

Bonjour, bonne année et surtout merci pour cette réponse de qualité!

Suite à ma 2èm question, j'ai fais quelques tests avec mon code ci-dessus, et si effectivement se sont les images en cache qui sont appelé.
Il suffit d'insérer autre chose qu'une image dans ma boucle, ou voir paramétrer le navigateur sans cache pour qu'avec mon code tout soit rechargé à chaque itération !

Et ce n'est pas le résultat que je recherche!

Je n'ai donc plus que ce pb, comment modifier ce code :

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
<!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 = '';
			var timer = {};
			var count = 0;
 
			timer = setTimeout( iter, 0 );			
 
			function iter()
			{
				clearTimeout( timer );
 
				if( count < 5 )
				{
					mostPicture = mostPicture + picture;
					document.getElementById( 'content' ).innerHTML = mostPicture;
					count++;
 
					timer = setTimeout( iter, 1000 );
				}
			}
		</script>	
	</body>
</html>

De façon à ajouter chaque fois une nouvelle image pour qu'à chaque itération j'affiche la nouvelle sans touché à/aux (la) dernière(s) déja chargé et affiché ?

Merci

**NoSmoking** · 02/01/2013, 16h06

Tu as toutes les infos pour le faire.
Création d'un Array d'images et ajout à chaque itération, c'est une compilation de ce qui t'a été donné ci dessus.

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

JavaScript

Discussions similaires

Partager

Partager