图像下载前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来实现跨浏览器兼容性。