更改 img src 属性是否会发出任何发射器？

Question

我正在处理一个包含不同尺寸图像的页面，我想根据新图像的高度更改父 div 尺寸。

我把inner、viewOne和viewTwo设置为全局变量，我的代码如下

  viewOne.src = 'path/to/newImage.png';
  viewTwo.src = 'path/to/otherImage.png';

  inner = document.getElementById('innerWindow'); // Parent Div
  viewOne = document.getElementById('viewImgOne'); // Image Object
  viewTwo = document.getElementById('viewImgTwo'); // Image Object

  if(viewOne.clientHeight >= viewTwo.clientHeight) {
    inner.style.height = viewOne.clientHeight + "px";
  } else {
    inner.style.height = viewTwo.clientHeight + "px";
  };

父级 div 在更改图像路径后并不总是正确调整自身大小，因此 div 底部可能会遗留几百个不应该存在的像素在时间。

我还有一个 window.onresize 函数可以在浏览器 window 发生变化时调整 div 的大小，并且它按预期工作。

有没有办法观看 src，以及运行图片完全加载后的调整大小功能？

Answer 1

解决此问题的一种方法是为所有图像绑定 .load 事件，然后在 src 更改后您将知道图像何时完成加载。我不确定是否有更直接的方式来观察 src 的变化。但是，为了使其始终如一地工作，您需要在任何内容接触图像元素的 .src 之前绑定 .load。

如果您正在动态创建图像元素，这应该不是问题，或者如果您一遍又一遍地重复使用相同的图像标签，那应该不是问题（除了最初的第一次加载页面加载，但您可能不需要担心这个？)

更改 img src 属性是否会发出任何发射器？

Does changing an img src attribute emit any emitters?

javascript

css

jquery

node.js

electron