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函数来调整div的大小，并且它可以正常工作。

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

Answer 1

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

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

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

1 个答案: