11528 sujets

JavaScript, DOM et API Web HTML5

[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 ?
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)
?
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)
Sujet clos
Aller à