Szerokość i wysokość obrazu IE = 0 przed pobraniem obrazu

Question

Próbuję ustawić wartość wysokości elementu obrazu utworzonego w javascript. W FF, Opera & Chrome ustawia poprawnie wysokość &. Jednak w IE 6 & 7 (Nie próbowałem 8) szerokość & wysokość pozostaje 0, dopóki obraz nie zostanie pobrany. Powodem, dla którego tego potrzebuję jest to, że mogę umieścić każdy obraz w rzędach & cols w oparciu o jego bieżący rozmiar.

Jeśli nie jest możliwe ustawienie właściwości wysokości & w IE, to po prostu muszę utworzyć własną własność i ustawić ją tam.

Oto podstawowy kod, którego używam do utworzenia elementu &.

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:

Próbowałem ustawienie img.style.visibility = 'ukryty' zamiast img.style.display = 'none'; ale to nie robi różnicy.

EDIT

znalazłem problem. Rzeczywistym problemem było połączenie rozwiązania Aziz i czegoś, czego pominąłam w oryginalnym przykładzie. Wydaje się, że w IE, jeśli dodasz element do innego elementu przed przypisaniem szerokości IE, po prostu go zignoruje.

Answer 1

This problem is explained here

W celu uzyskania prawidłowych wymiarów w IE, trzeba ustawić display: hidden visibility: hidden. Musisz jednak upewnić się, że ustawiłeś go tylko wtedy, gdy przeglądarką jest IE.

Edit spróbuj tego (u mnie działa)

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

Musisz jednostki:

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); 

Pamiętaj, aby dodać jednostkę "px". Użyj odpowiednio element.style.width i , aby uzyskać zgodność z przeglądarką.