javascript - 如何处理IE11中偶尔出现的offsetWidths/Heights错误

假设我们有以下内容:

var img = document.getElementById('someImageTag');
img.onload = function() {
  console.log(img.offsetWidth, img.offsetHeight);
};
img.src = "/path/to/300x200.png";

在IE11中(在边缘兼容模式和较低兼容模式下)，我通常会在控制台中看到300, 200，这与预期的一样。但是，我偶尔会在控制台中看到28，32(IE的“找不到图像”图形？)。同样，在触发后代图像的onload事件后，父级的offsetWidth和offsetHeight通常是-但并不总是准确的。

在我们的应用程序中，这种可见的表现是一个短暂的错误，其中某些元素的静态大小不正确。当将子元素拖出某些元素时，某些元素将保留由其子元素的大小确定的特定大小。

这是一个已知的问题？是否有已知的解决方法来获取相同的值？还是我应该使用更可靠的值(可能不包括边框/填充)？

:同样有用，甚至没有更多帮助。:有什么方法可以[在测试中]一致地重现该问题，以便确定何时可以成功解决该问题？

最佳答案

您没有提到使用的是哪个版本的IE，但是我知道，在缓存图像时，早期版本的IE(至少为6和7)有时会做一些奇怪的事情。

我无法对此进行测试，因此请尝试一下:

function onloadHandler() {
  console.log(this.offsetWidth, this.offsetHeight);
}

var img = document.getElementById('someImageTag');
img.onload = onloadHandler;
img.src = "/path/to/300x200.png";

if( img.complete || img.readyState == "complete" ) {
  onloadHandler.call(img);
}

How to tell when an image is already in browser cache in IE9?