Question

假设我们有以下内容：

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＆＃39; s＆＃34;图片未找到＆＃34;图片？）。同样，在后代图像的onload事件触发后，父级的offsetWidth和offsetHeight通常会 - 但始终准确无误。

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

这是一个已知问题吗？是否有已知的解决方法来获得相同的值？或者，我应该使用更可靠的值（可能不包括边框/填充）吗？

同样有帮助，如果没有更多帮助：有没有办法始终重现问题[在测试中]，所以我可以确定我什么时候开始成功解决了这个问题？

Answer 1

你没有提到你正在使用哪个版本的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?

Answer 2

我有两种方法可以做到这一点。

如果您想要获取源图像的实际尺寸，可以使用naturalWidth和naturalHeight属性，这些属性将返回偏移错误时您要查找的值。

img.onload = function() {
  //For browsers that don't support naturalWidth, use offsetWidth
  var myWidth = img.naturalWidth || img.offsetWidth,
      myHeight = img.naturalHeight || img.offsetHeight;
  console.log(myWidth, myHeight);
};

如果您正在寻找css /样式的图像调整大小，我建议尝试延迟功能超时。似乎IE11只会在onload事件触发后立即返回不正确的值。尝试这样的事情：

img.onload = function() {
  var myWidth = img.offsetWidth,
      myHeight = img.offsetHeight;

  //From my testing, the values IE11 returns aren't always 28 and 32
  if(myWidth < 40 && myHeight < 40){
    setTimeout( function(){
      console.log(img.offsetWidth, img.offsetHeight);
    }, 150); )
  }
};

如果您希望图像小于40x40，则上述if语句不起作用。假设包含img的元素大于40x40，您可以使用naturalWidth和naturalHeight检查图像是否小于它的实际大小。试试这个：

img.onload = function() {
  var myWidth = img.offsetWidth,
      myHeight = img.offsetHeight,
      natWidth = img.naturalWidth || -1,
      natHeight = img.naturalHeight || -1;

  if( myWidth < 40 && myHeight < 40 && (myWidth < natWidth || myHeight < natHeight) ){
    setTimeout( function(){
      console.log(img.offsetWidth, img.offsetHeight);
    }, 150); )
  }
};

如何在IE11中偶尔处理错误的offsetWidths / Heights

2 个答案: