Chrome's changing height when loading pictures - how to get actual height with jQuery on load

Question

I have the following:

var offset = {top: target.offset().top + target.height() + 3,
                  left: target.offset().left};
target.offset(offset);

this happens on $(document).ready(..)

However, in chrome, the target object is not positioned with the appropriate height. When I placed an alert(..) to show the actual height, I saw the reason - target.offset().top returns less than desired because at that moment an image still isn't loaded (the alert blocks the loading of the page and this becomes visible).

I fixed the issue by specifying an explicit height of the <div> around the image, but is there a better way?

Answer 1

Instead of $(document).ready(..), use $(window).load(...) for this :)

The window onload event doesn't happen until after images are finished loading, so that's what you want in these cases.