下載圖片之前的IE圖片寬度和高度= 0

Question

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

如果無法在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 =代替img.style.display '隱藏'= '無';但它沒有什麼區別。

編輯

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

Answer 1

This problem is explained here

爲了獲得在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); 

記住要加上單位 「像素」。爲了實現跨瀏覽器兼容性，分別使用element.style.width和element.style.height而不是element.width和element.height。