IE图像宽度&下载图像之前高度 = 0

Question

我正在尝试设置宽度和宽度我在 javascript 中创建的图像元素的 height 属性。在 FF、Opera & Chrome 它设置宽度和宽度高度正确。然而在 IE 6 和 IE 中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 = 'hidden' 而不是 img.style.display='none';但这没有什么区别。

编辑

我发现了这个问题。实际问题是 Aziz 解决方案和我在原始示例中遗漏的内容的组合。看来在 IE 中，如果在分配宽度和宽度之前将元素附加到另一个元素中， height IE 只是忽略它。

Answer 1

这里解释了此问题

为了在IE中获得正确的尺寸，需要设置display:hiddenvisibility: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为了跨浏览器兼容性。