Javascript Synchronous Execution

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

Solution 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

Solution 2:

The javascript is synchronous, but the problem is that setting the src attribute is not the same as displaying the image. Once you set the src, you dispatch the browser to start loading the image, then the execution of your script continues. If you want code to execute after the image has been loaded, you'll have to attach the call to the image's onload event.

In jQuery use the load function:

$('.container > img').attr('src', 'image src').load(function(){
   // Stuff to do after the image has been loaded
});

Solution 3:

Use .load event listener which will be trigger when the image is loaded

$('.container > img').attr('src', 'image src').load(function(){
  $('.container').show();
});