Question

I have somethign like this:

<div id="container">
 <img id="screenFirstImg">
</div>

And js:

$('a.screenThumbLink').click(function(){

  console.log( $('#container').height() );
    $('img.screenFirstImg').attr('src','new src');
  console.log( $('#container').height() );

});

Basically on the click of a tumbnail the screenFirstImage get changed (with a bigger image). But console.log shows the exact same number of the height and that’s not possibile because after i set the new src the container gets bigger.

Maybe thats because when i do teh second console.log the image hasn’t loaded yet.
How can I get the .height after the loading of the img?

Answer 1

$("#container img").load(function () {
  console.log( $("#container").height() );
});

$('a.screenThumbLink').click(function(){
  $('img.screenFirstImg').attr('src','new src');
});