[Résolu] Boucle - source d'image - liste

Bonjour,
J'ai une image et j'aimerais quelle prenne pour source l'élément i d'une liste d'url.
Dès que l'image est chargée, il faut qu'elle prenne l'élément suivant de la liste d'url.
La liste s'appelle "list" et l'id de l'image est "image".
J'ai essayé

for(var i=0;i<list.length;i++){
	document.getElementById("image").src=list[i];
	while(!document.getElementById("image").complete){}
}

mais ça faisait juste tourner le navigateur et ça ne fonctionnait pas.

Pourquoi https://jsfiddle.net/exercices/pyq2okrg/ fonctionne avec 'alert' mais ne fonctionne pas avec 'console.log' ?

Savez-vous pourquoi ? Savez-vous comment y remédier ?
Merci !
Modifié par js_html (05 Dec 2020 - 16:00)

Hello

J'ai du mal à visualiser la fonctionnalité. Est-ce un slider/diaporama ? Pourquoi faire une boucle sur la même image ?

Bonjour,
https://jsfiddle.net/exercices/ejxf7cum/ aurait pour moi servi à faire un petit film avec seulement des images. Mais ça fait juste une boucle infinie.
J'ai essayé plutôt avec https://jsfiddle.net/exercices/pyq2okrg/. Ca fonctionne car j'ai mis alert() qui stoppe le script. Mais si je mets autre chose comme console.log(), ça ne marche pas.

Comment faire pour attendre jusqu'à ce que l'image soit chargée ?
Merci !

Et maintenant ?

console.clear();

var list=["https://www.cjoint.com/doc/20_09/JImqNiPkCMR_close.png","https://www.cjoint.com/doc/20_10/JJElw0OphPR_google.png","https://www.cjoint.com/doc/20_10/JJEnFjZHGdR_youtube.png"]
var image=document.getElementById("image")
for(var i=0;i<list.length;i++){
	//image.src=list[i];
  (function(i){
    setTimeout(function(){
      image.src=list[i]
    }, 1000 * i)
  })(i)
}

La IIFE sert à encapsuler la variable i à chaque tour de boucle et l'exploiter localement.

Le i permet de changer le timing à chaque appel du setTimeout: 1000, 2000, 3000

Merci !
Au lieu de

setTimeout(function(){image.src=list[i]},1000*i)

, ce ne serait pas mieux

setInterval(function(){image.src=list[i]},1000)

?

Essaie pour voir

Ça ne fonctionne pas mais je ne sais pas pourquoi.

Le i permet de changer le timing à chaque appel du setTimeout: 1000, 2000, 3000

Mais si on mets un intervalle de 1000, ce n'est pas censé faire l'action toutes les secondes, comme ce timeout ?
Modifié par js_html (07 Dec 2020 - 15:40)

non, ce n'est pas setInterval