javascript - 何时检索包含图像的元素的高度？

Question

在我的网络应用程序中，我想显示其中包含<img>元素的弹出元素。图像源通常比我需要的大，所以它在 css 中调整大小。在我展示它之前，我需要知道它是outerHeight.

弹出窗口看起来像这样：

<div class="popupContainer">
  <div class="popupHeader">Header</div>
  <img class="popupImage" src="source" />
  <div class="popupMessage">message</div>
</div>

在我将它附加到另一个元素之后，我尝试通过两种方式检索它的高度：简单地popup.outerHeight(true)和使用imagesLoaded库：

imagesLoaded(popup, function () {
  popup.outerHeight(true)
})

在大多数情况下，这两个选项都会返回相同的预期结果（例如元素在浏览器中的实际高度）。但有时选项 #1 返回的高度太小，因为图像源尚未加载，而选项 #2 返回的高度太大，因为尚未应用 css。（我认为这就是原因）。所以我想知道，什么是恢复它的高度的最佳时间？何时加载图像并且元素将根据 css 正确格式化。

Answer 1

您应该在加载图像时执行此操作。