何时检索带有图像的元素的高度？

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

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