圖像下載前IE圖像寬度和高度= 0

Question

我正在嘗試設置我在javascript中創建的圖像元素的寬度和高度屬性。 在FF，Opera和Chrome中，它正確設置寬度和高度。 但是在IE 6和7（尚未嘗試過8）中，寬度和高度保持為0，直到下載圖像為止。 我需要這個的原因是我可以根據它的當前大小將每個圖像放在行和列中。

如果無法在IE中設置寬度和高度屬性，我想我只需要創建自己的自定義屬性並將其設置在那里。

這是我用來創建和注入元素的基本代碼。

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

編輯：

我試過設置img.style.visibility ='hidden'而不是img.style.display ='none'; 但它並沒有什么區別。

編輯

我發現了這個問題。 實際問題是Aziz解決方案和我在原始示例中遺漏的內容的組合。 看來在IE中如果你在分配寬度和高度之前將元素附加到另一個元素中，IE就會忽略它。

Answer 1

這里解釋了這個問題

為了在IE中獲得正確的尺寸，您需要設置 display: hidden visibility: hidden 。 但是，您必須確保僅在瀏覽器是IE時才設置它。

編輯嘗試這個（適合我）

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

你需要這個單位：

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

請記住添加單位“px”。 分別使用element.style.width和element.style.height而不是element.width和element.height來實現跨瀏覽器兼容性。