Question

Here is html code:

<div id="image-div">
    <img id="image" src="" />
</div>

And js code:

# on dialog open
$.ajax({
    url: "/ajax/img",
    success: function(data){
        $("#image").prop("src", data);
    }
});

So, at the beginning the height of #image-div = 0 and it changes only after real image loaded from server (after success ajax request). How to get new height of that div?

Thanks!

Answer 1

Use the load event for the image. I have seen some alternate solutions because for cached images load may not fire. Honestly I’ve never seen this on my own sites. I have also seen on SO someone say that $('#image').ready( function() { ... }); has always worked for them.

success: function(data){
        $("#image").prop("src", data).load( function() {
               $(this).parent('div').height();
        });
    }

Ahh, dug up the link to the ‘ultra safe way’ for detecting image load.

Image does not have width at document.ready