11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Voila j'utilise la methode setTimeout comme ceci:
setTimeout("verif()", 200)


Mais je voudrais pouvoir l'utilise comme ceci:
setTimeout("verif(" + varible + ")", 200)

Et avec ceci, au premiere appel cela marche mais quand la fonction se rapelle elle meme avec le settimeout cela ne marche plus Smiley decu

Pouvez vous m'aidé?
Merci Smiley lol
Salut,

Tu peux passer une fonction comme premier paramètre de setTimeout :
setTimeout(function() {verif(variable);}, 200);
Ceci dit, je ne suis pas sûr que ça réponde à ta question, qui est un peu floue. Smiley cligne

Si ce n'est pas le cas, peux-tu nous donner un exemple plus complet ?
Bon en faite c'est pour verifier si une image est chargé ou pas.
Et donc je veut que ma fonction verif() marche comme ceci:

function verif(img) {
	if(img.complete)
		alert("chargé");
	else
		setTimeout("verif()", 500);
}

Et donc dans le setTimeout je veut faire passé la variable img...
Argh. Smiley smile

JavaScript est un langage événementiel, il est donc bien plus efficace d'utiliser l'événement load sur l'image plutôt qu'un setTimeout :
function imgLoad() {
  alert("charge !");
}

var img = new Image();
img.onload = imgLoad;
img.src = "pouet.jpg";
Oui mais ma fonction verif fonctionne d'une autre maniére mais je voudrai quand meme savoir si c'est faisable de passé un argument meme avec le settimeout Smiley lol

Et en passant voici le code de ce que je fais Smiley cligne
tabimg = new Array();
function recharg() {
	for (i = 0 ; i < document.images.length ; i++) {
		tabimg[i].src = "img.php?action=affich&time=" + (new Date()).getTime()+i;
		document.images[i].src = "spin.gif";
	}
	verif();
}
function verif() {
	for (i = 0 ; i < tabimg.length ; i++) {
		if(tabimg[i].complete)
			document.images[i].src = tabimg[i].src;
		else
			setTimeout("verif()", 500);
	}
}
function ajoutimg() {
	tabimg.push(new Image());
	tabimg[document.images.length].src = "img.php?action=affich&time=" + (new Date()).getTime() + document.images.length;
	document.getElementById("images").innerHTML += "<img src='spin.gif' border='0' alt=''/><br/>";
	verif();
}

Qu'en pensez vous?
Et adapté le onload la eu pas evident Smiley sweatdrop [/i][/i][/i][/i][/i]
Modifié par cerede2000 (29 Mar 2007 - 11:06)
A mon avis, il est tout à fait possible d'utiliser onload dans ton code. pour setTimeout, tu peux procéder comme je te l'ai suggéré dans mon message de tout à l'heure :


function verif(img) {
	if(img.complete)
		alert("chargé");
	else
		setTimeout(function() {verif(img);}, 500);
}
cerede2000 a écrit :
Hum oui on doit pouvoir utilisé le onload mais faudrais changé enormement de code Smiley bawling non?
Pas tant que ça...

Par contre, je ne le ferai pas, si c'est la question implicite. Smiley cligne
Bon j'essaye de me mettre au onload, mais je ne voit pas comment transformer ma fonction verif qui utilise deux tableaux pour se repérer en une fonction qui ne depent que de l'image en cours Smiley decu
Juste une petite piste m'aiderai beaucoup Smiley cligne
Merci
Il faut que tu définisses un onload par image. Si tu veux passer un paramètre à la fonction appelée au chargement, tu peux utiliser une fonction anonyme :
var img = new Image();
var param = "pouet";
img.onload = function() {
  alert(param);
};
img.src = "pouet.jpg";
Ok je suis arrivé a cela:
image = new Image();
function recharg() {
	for (i = 0 ; i < document.images.length ; i++) {
		tabimg[i].src = "img.php?action=affich&time=" + (new Date()).getTime()+i;
		document.images[i].src = "spin.gif";
	}
}
function imgLoad(nimg) {
	document.images[nimg].src = tabimg[nimg].src;
}
function ajoutimg() {
	tabimg.push(new Image());
	tabimg[document.images.length].src = "img.php?action=affich&time=" + (new Date()).getTime() + document.images.length;
	tabimg[document.images.length].onload = function() { imgLoad(document.images.length-1) };
	document.getElementById("images").innerHTML += "<img src='spin.gif' border='0' alt=''/><br/>";
}

Pour l'ajout d'une image ca marche parfaitement, reste un probleme avec la fonction recharg() elle ne recharge que la derniere image a jouté et je ne voit pas pourquoi Smiley sweatdrop [/i][/i]
Oui, en fait document.images.length-1 dans ta fonction anonyme est évaluée au moment où l'événement se produit (et vaut donc la même valeur pour toutes les images). Il faut passer par une variable définie dans ta fonction ajoutimg :
function ajoutimg() {
  ...
  var nimg = document.images.length;
  tabimg[ nimg].onload = function() { imgLoad(nimg); };
  ...
}

Modifié par Julien Royer (30 Mar 2007 - 08:47)
Merci beaucoup cela marche Smiley lol
Une derniere question avant de clore ce topic, y a t'il un moyen de mettre une image de chargement pour toutes des image dans la pages?
C'est a dire que j'ai une page avec des images lourdes a charger de ce style:

<html>
<body>
	<img src="imagelourde" alt="" id="imgl1"/>
	<img src="imagelourde" alt="" id="imgl2"/>
	<img src="imagelourde" alt="" id="imgl3"/>
	<img src="imagelourde" alt="" id="imgl4"/>
	<img src="image" alt=""/>
</body>
</html>

Donc si on charge la page sans JS ca affiche les images normal meme si ca met du temps, mais si JS est activé je voudrai mettre, uniquement pour les images lourde un gif de chargement.
Je n'ai pas reussi avec le windows.onload car il attent que la page soit chargé.
Donc comment faire Smiley decu
Merci Smiley cligne
Salut !

Bon déjà, quel est l'intérêt d'une telle fonctionnalité ? Il vaut mieux laisser le navigateur s'occuper de gérer le chargement des images (et afficher le texte alternatif en attendant, par exemple), et tu risques de te retrouver avec une usine à gaz pour pas grand chose.

Si tu tiens vraiment à le faire, il faudra sans doute ajouter un élémént script après tes images, qui les remplacera par l'image de chargement, et créera des objets Image avec le gestionnaire d'événements load pour remettre l'image d'origine quand elle est chargée.