Why Changing Src Of An Image Is Async?

I have somethign like this:

And js: $('a.screenThumbLink').click(function(){ console.log( $('#container

Solution 1:

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

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

Solution 2:

Change your code to

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

  console.log( $('#container').height() );
  $('img.screenFirstImg')
      .one('load', function(){
               console.log( $('#container').height() );
          })
      .attr('src','new src');
});

Solution 3:

attach an onload event to the image, that will fire when then image has been loaded and you can do whatever you need then.