IE image width & height = 0 avant le téléchargement de l'image

Question

J'essaie de définir la largeur & propriété height d'un élément d'image que j'ai créé en javascript. Dans FF, Opera & Chrome, il définit la largeur & hauteur correctement. Cependant, dans IE 6 & 7 (N'a pas essayé 8) la largeur & hauteur reste 0 jusqu'à ce que l'image est téléchargée. La raison pour laquelle j'ai besoin de cela est que je peux positionner chaque image dans les rangées en fonction de sa taille actuelle.

S'il n'est pas possible de définir la largeur & propriétés de hauteur dans IE Je pense que je vais juste devoir créer ma propre propriété personnalisée et le définir là.

Voici le code de base que j'utilise pour créer & injecter l'élément.

var img = document.createElement('img'); 
var wrap = document.createElement('div'); 

document.body.appendChild(wrap); 
wrap.appendChild(img); 

img.src = 'blah.jpg'; 
img.width = '100'; 
img.height = '100'; 
img.style.display = 'none'; 

// IE: width: 0 | height: 0 
// FF: width: 100 | height: 100 
alert('width: ' + img.width + ' | height: ' + img.height); 

EDIT:

J'ai essayé de placer img.style.visibility = 'caché' au lieu de img.style.display = 'none'; mais ça ne fait pas de différence.

EDIT

Je trouve la question. Le problème réel était une combinaison de la solution Aziz et quelque chose que j'ai omis dans l'exemple original. Il semble que dans IE si vous ajoutez l'élément dans un autre élément avant d'affecter une largeur & hauteur IE l'ignore simplement.

Answer 1

This problem is explained here

Afin d'obtenir les dimensions correctes dans IE, vous devez définir display: hidden visibility: hidden. Cependant, vous devez vous assurer que vous le définissez seulement si le navigateur est IE.

Modifier essayer (fonctionne pour moi)

var img = document.createElement('img'); 

img.src = 'blah.jpg'; 
img.width = '3000'; 
img.height = '1000'; 

img.style.visibility = 'hidden'; 


document.body.appendChild(img); 

// should work correctly 
alert('width: ' + img.width + ' | height: ' + img.height); 

Answer 2

Vous aurez besoin de l'unité:

var img = document.createElement('img'); 

img.src = 'blah.jpg'; 
img.style.display = 'none'; 
img.style.width = '100px'; 
img.style.height = '100px'; 

document.body.appendChild(img); 

// IE: width: 100 | height: 100 
// FF: width: 100 | height: 100 
alert('width: ' + img.style.width + ' | height: ' + img.style.height); 

Rappelez-vous d'ajouter l'unité "px". Utilisez element.style.width et element.style.height au lieu de element.width et element.height respectivement pour la compatibilité croisée.