为什么 IE11 return 错误 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>

现在我已经测试了几个浏览器和所有 return 0x0，直到图像 header（不是完整的图像）被加载。之后他们 return 正确的尺寸（例如 1920x1080）。

但是 Internet Explorer 11（我只能测试这个浏览器版本）return每张图片的 28x30 像素（与纵横比无关），直到加载 header。

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

Answer 1

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

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

这个 returns 0x0 直到图像 header 被加载。

为什么 IE11 return 错误 img.width 和 img.height （28x30 像素）仍然加载图像？

Why does IE11 return wrong img.width and img.height (28x30 pixels) for still loading images?

javascript

internet-explorer

internet-explorer-11