下载图片之前的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。