javascript synchronous loading

javascript synchronous loading

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..