I am working on my web app and I want to implement a popup element that contains an <img> element. Typically, the image source is larger than necessary, so I resize it using CSS. However, before displaying the popup, I need to determine its outerHeight.
The structure of the popup is as follows:
<div class="popupContainer">
<div class="popupHeader">Header</div>
<img class="popupImage" src="source" />
<div class="popupMessage">message</div>
</div>
Once the popup is appended to another element, I have attempted to retrieve its height in two different ways: using popup.outerHeight(true) directly and utilizing the imagesLoaded library:
imagesLoaded(popup, function () {
popup.outerHeight(true)
})
In most scenarios, both methods provide the expected result, indicating the actual height of the element on the browser. However, there are situations where option #1 returns a height that is too small because the image source has not loaded yet, while option #2 gives a height that is too large due to the CSS not being applied yet. I believe these are the reasons behind the discrepancies. Therefore, I'm curious to know the optimal time to retrieve the height – when the image is fully loaded and the element is styled correctly according to the CSS.