naturalHeight, naturalWidth n’existe pas sous Internet Explorer et vous cherchez la taille non redimensionné d’une image.

Cet article vas vous donner une solution simple pour calculer cette dimension sous le navigateur Internet Explorer.

Qu’est ce que naturalHeight et naturalWidth ?

naturalHeight et naturalWidth sont deux propriétés de l’objet Image en JavaScript d’après la norme W3C, cf lien ici.

Ces propriétés renvoient respectivement la hauteur et la largeur d’une image en pixels, sans prendre en compte le redimensionnement de l’image.

Le fait qu’une image, ne soit pas a sa dimension original peu être du :
au code HTML
<img src=’mon_image’ width= »100″>
au code CSS
img {width:100px;}
au code Javascript
img.style.width= »100px »;

Dans ces cas la, si vous récupérez la taille de l’image, avec la propriété width, vous récupérez ici l’entier 100 et non la taille réelle de l’image. (de même avec height)

Les navigateurs Firefox, Safari , Opéra, Chrome proposent ces propriétés.
naturalHeight et naturalWidth qui renvoie donc véritable hauteur et largeur de l’image sans prendre en compte l’affichage XHTML.

Mais les Internet Explorer 6 et Internet Explorer 7 ne possèdent pas ces propriétés.

Astuce Javascript

La solution que je vous propose est de crée une fonction, qui reçoit en paramètre un objet de type image.
Tout d’abord on test si naturalHeight et naturalWidth existe et les utilise si tel est le cas.
Sinon, dans le cas des Internet Explorer il faut :

• Créer un nouvel objet image
• Lui affecter l’adresse de l’Image voulue
• Retourner les propriétés height et width

Code JavaScript

function getNaturalHeight(img){
	if(typeof img.naturalHeight == "undefined") {
		var temp_image = new Image();
		temp_image.src = img.src;
		return temp_image.height;
	} else {
		return img.naturalHeight;
	}
}

function getNaturalWidth(img) {
	if(typeof img.naturalWidth == "undefined") {
		var temp_image = new Image();
		temp_image.src = img.src;
		return temp_image.width;
	} else {
		return img.naturalWidth;
	}
}

Avantages :

• Retourne exactement la taille de l’image sans redimensionnement.
• Bonne performances

Inconvénients :

• Le même que naturalHeight et naturalWidth : l’image doit déjà être chargé pour récupérer la valeur. Attention si vous voulez l’appliquer à une image qui n’est pas encore chargé à bien vérifier l’état « complete » de l’objet Image.
• Ceci est une fonction et chaque appel L’oblige à s’exécuter une nouvelle fois (la solution serai elle d’étendre l’objet image par une méthode qui ne calculerai qu’une seule fois le champ ?)

Conclusion :

Cette fonctionnalité peu être utilisée sous Internet Explorer, attention toute fois aux scripts que vous pourrez trouver sur internet, certains d’entre eux ne récupèrent que la largeur après redimensionnement.

Réflexion

Un alternative à l’utilisation d’une méthode aurai été d’utiliser behavior en css.
Behavior permet d’exécuter du javascript à partir de css, ce qui, en appliquant automatiquement a toutes les balises images, permettrai de générer naturalHeight et naturalWidth.
Je ne pense pas que cela soit une bonne idée, car la fonction sera utilisé pour rien dans la majeur partie des cas, ce qui impactera légèrement les performance du navigateur, qui pour certains utlisateurs avec des configuration d’ordinateur faible, seront pénalisés.