javascript synchronous execution

Question

I am new to javascript and trying on a slider.My problem is similar to the below question jquery .attr() with callback?. If the flow is synchronous, shouldnt the display be delayed till the source is fully loaded rather than showing the old image

$('.container').fadeOut(100, function(){
     console.log("before");
     $('.container > img').attr('src', 'image src');
     $('.container').show();
     console.log("after");
 });

I could see both the logs in the console before the new image gets loaded.. Can anyone pls explain...Pls pardon if the question is naive I am trying to get hold of the concept..

Answer 1

The moment you call $('.container > img').attr('src', 'image src'); , a request is made to server to load the image. It takes time to load the image hence the delay.

But if you look closely, the line is executed perfectly. The reason you see console entry before image loads is because the image takes time to load