When to retrieve height for element with image in it?

Question

In my web app, I want to display popup element which has <img> element in it. Image source is usually bigger than I need it, so it get's resized in css. And before I display it, I need to know it's outerHeight.

The popup looks something like this:

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

After I append it to another element, I'v tried retrieving it's height in two ways: simply popup.outerHeight(true) and using imagesLoaded library:

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

In most caes, both options return the same and expected result (like how tall the element actually is in browser). But there are times when option #1 returns height that is too small, because the image source hasn't been loaded yet, whereas option #2 returns height that is way too big, because the css hasn't been applied yet. (I think that those are the reasons). So I wanted to know, which is the best time to retrieve it's height? When the image will be loaded and element will be formatted correctly accoring to css.

Answer 1

You should do when the image will be loaded.