Instanciation d'un nombre inconnu d'objets image [Résolu]

[Jerem87]

Bonjour,

Je souhaiterais déterminer la hauteur et largeur d'un nombre inconnu d'images grâce à javascript, mais je rencontre certains problèmes.

Pour tenter de réaliser ce script, j'ai procédé comme suit :

Code :

1
2
3
4
5
6
7
8
9
for (var j = 0; j < tab.length; j++) //où tab est un tableau d'un nombre inconnu d'images url 
{
	var picture = new Image();
 
	picture.addEventListener("load", function() {
		alert(picture.width + "*" + picture.height);
	}, false);
	picture.src = tab[j];
}

Ce code marche très bien quand il n'y a qu'un seul url dans "tab", mais ça bug de plus en plus à mesure que le nombre d'url augmente.

Pour moi ça vient du fait que la boucle s'exécute sans attendre la fin du chargement de l'image précédente ce qui modifie la variable picture en cours d'utilisation. J'ai bien pensé à transformer la variable picture en un tableau de la manière suivante :

Code :

1
2
3
4
5
6
7
8
9
10
11
var picture = new Array();
 
for (var j = 0; j < tab.length; j++) 
{
	picture[j] = new Image();
 
	picture[j].addEventListener("load", function() {
		alert(picture[j].width + "*" + picture[j].height);
	}, false);
	picture[j].src = tab[j];
}

Mais, visiblement, on ne peut pas instancier d'objet image dans un tableau (le script ne marche plus du tout). Peut être faudrait il réaliser une variable qui s'incrémente dynamiquement (picture1, picture2, ...), mais je ne sais pas si c'est possible et il doit certainement exister une méthode plus "propre".

Pourriez vous m'aidez à corriger ce problème?

Merci

[SpaceFrog]

Code :

style.height

?

Code :

style.offsetHeight

?

[Jerem87]

@SpaceFrog

Non, le problème n'est pas vraiment de récupérer la taille de l'image, le problème est plutôt de charger les images dans des variables différentes de manière à pouvoir récupérer les paramètres de taille (enfin à mon sens). Mon code marche très bien en l'absence de la boucle for. Si il y a 10 images et que je met ce bout de code 10 fois (avec des noms de variables incrémenté manuellement), ça marche parfaitement. Mais bon, moi, ce que je veux c'est quelque chose de dynamique, donc cette solution ne me convient pas.

Sinon, je ne pense pas que 'style' soit nécessaire dans mon cas étant donné que c'est un objet image et non un block .

[Bovino]

Mais, visiblement, on ne peut pas instancier d'objet image dans un tableau

si, c'est tout à fait possible, mais le problème c'est qu'au moment où le onload est déclenché, "j" a changé de valeur

Code :

picture[j].onload = function(){alert(this.width+'*'+this.height);}

[SpaceFrog]

Essaye ça

Code :

1
2
3
4
5
6
7
8
9
for (var j = 0; j < tab.length; j++) //où tab est un tableau d'un nombre inconnu d'images url 
{
	var picture = new Image();
	picture.addEventListener("load", function() {
	alert(picture.width + "*" + picture.height);
	}, false);
	picture.indice=j
        picture.src = tab[picture.indice];
}

[Jerem87]

@Bovino

Ah oui, c'est fort possible, mais comment je pourrais régler ce problème dans ce cas?

PS : je ne peux pas utiliser la syntaxe :

Code :

variable.onload = function() {}

car elle ne fonctionne pas avec greasemonkey, or mon script est justement un script greasemonkey. (Ou alors c'est moi qui l'ai mal utilisé, mais d'après ce que j'ai lu sur gm, c'est un addEventListener qu'il faut utiliser).

@SpaceFrog

Ça donne la même chose qu'avec le code précédent, 17*17, c'est à dire la taille de la plus petite des images, et de fait, la plus rapide à charger.

[Jerem87]

Bon ben la nuit m'a porté conseil, j'ai trouvé la solution à mon problème. Il suffisait d'utiliser 'this' à la place de 'picture[j]' à l'intérieur de la fonction de l'addEventListener.

Ce qui donne plus clairement :

Code :

1
2
3
4
5
6
7
8
9
10
11
var picture = new Array();
 
for (var j = 0; j < tab.length; j++) 
{
	picture[j] = new Image();
 
	picture[j].addEventListener("load", function() {
		alert(this.width + "*" + this.height);
	}, false);
	picture[j].src = tab[j];
}

Merci de m'avoir mis sur la voie .