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

When to retrieve height for element with image in it?

本文关键字：元素 高度 图像 检索 包含 何时      更新时间：2023-09-26

在我的web应用程序中，我想显示具有<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正确格式化。

您应该在加载图像时这样做。

相关文章：