Javascript 如何处理IE11中偶尔出现的错误网络间距/高度

假设我们有以下情况：

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

在IE11中（在edge和lower兼容模式下），我通常会在控制台中看到

300200

，正如预期的那样。但是，我偶尔会在控制台中看到

28

，

32

（即“未找到图像”图形？）。类似地，在子映像的

onload

事件触发后，父映像的

offsetWidth

和

offsetHeight

通常是准确的，但并不总是准确的

在我们的应用程序中，这一点的明显表现是一个暂时的bug，其中某些元素的静态大小不正确。当子元素从中拖出时，某些元素旨在保留由其子元素的大小决定的特定大小

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

---

同样有用，如果不是更有用的话。：有没有办法持续地重现[在测试中]问题，这样我就可以确定我何时成功地解决了这个问题？

你没有提到你使用的是哪个版本的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);
}

---

我可以想出两种方法来做到这一点

如果要获取源图像的实际尺寸，可以使用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); )
  }
};

img.onload=function（）{
var myWidth=img.offsetWidth，
我的身高=离地高度；
//根据我的测试，IE11返回的值并不总是28和32
如果（我的宽度<40和我的高度<40）{
setTimeout（函数（）{
控制台日志（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); )
  }
};

img.onload=function（）{
var myWidth=img.offsetWidth，
我的身高=离视线的高度，
natWidth=img.naturalWidth | |-1，
Nathweight=img.naturalHeight | |-1；
如果（myWidth<40&&myHeight<40&&myWidth

touch！我已经编辑了这个问题。我们在IE11/edge中看到了这个问题——我想我已经在IE11中的几个兼容模式下看到了它。至于你的解决方案：我以前的解决方案实际上做了类似的事情。现在捕获

onload

事件没有问题，因为您的解决方案主要解决这个问题。相反，

onload

触发得太快了--图像就在那里，就内存而言，我可以准确地查询图像本身的

宽度/高度。但是，
offsetWidth/Heigh依赖于图像的t
，并不总是准备就绪。