javascript - 为什么 IE11 仍在加载图像时返回错误的 img.width 和 img.height(28x30 像素)？

Question

我想在加载时检查图像宽度:

<img src="http://upload.wikimedia.org/wikipedia/commons/3/34/Regensburg_Uferpanorama_08_2006.jpg" id="img" alt="" />
<pre id="pre "></pre>
<script>
var i = 0;
var img = document.getElementById("img");
var pre = document.getElementById("pre");
function checkWidth() {
    i++;
    pre.innerHTML += "width:" + img.width + ";height:" + img.height + "\n";
    if (i < 20) {
        setTimeout(function() {
            checkWidth();
        }, 100);
    }
}
checkWidth();
</script>

现在我已经测试了几个浏览器，所有浏览器都返回 0x0，直到加载图像标题(不是完整图像)。之后，它们返回正确的尺寸(例如 1920x1080)。

但是 Internet Explorer 11(我只能测试此浏览器版本)为每个图像返回 28x30 像素(与宽高比无关)，直到加载 header 。

为什么 IE11 返回这个尺寸？这是所有 IE 版本中的常见行为吗？

Answer 1

@mouser 的想法是正确的。它是损坏图像的占位符:

我的解决方案是使用 img.naturalWidth() 而不是 img.width() ，如下所述:
https://stackoverflow.com/a/1977898/318765

这将返回 0x0，直到加载图像 header 。