Comment by Matt Strom on "Loading Div not showing on Jquery.Show()"

The { async: false } is probably wrong... the async=false option will cause the request to be blocking. I presume you did that because the loading indicator disappeared too quickly, right? If so, it disappeared too quickly because the image needs to be hidden only after the AJAX request has returned by using the callback.

$('.loading-gif').show();
$ajax({ url: url }).done(function(){
    //some operation
    $('.loading-gif').hide();
});

i do have few statement that i had to add after ajax call(which are to be executed if or else the ajax call is made), So i choose to go for async false( which my org also wants to hold on the request). But i didn' t know it will stop my animation and show() method of jquery( I was assuming show will be called next ajax so show will display the loading-gif and calls ajax, please correct me if i am wrong here).

Due its pretty asynchronous nature of JavaScript itself there is practically no such thing like "hold" the request. When you start a request (with JQuery, plain XHR or whatever you use) then the request ist running in the background and the main thread in the Browser continues. So like in your example the loading gif is already hidden despite the request is still running. So Matt suggestion is correct, you have to do stuff, thats depending on the request result, in the callback of that request.

The async option blocks the request and therefore the main thread. And blocking the main thread means like freeze the whole application.

If you try this example, you'll see why the async=false is the problem. (I made this JSFiddle for the example: jsfiddle.net/nmzu83wL/12 The URL makes a request to a server that takes 3 seconds to respond.)

$('.loading-gif').show();

$.ajax({
  url: '/echo/js?js=&delay=3',
  method: 'GET',
  async: false
}).done(function() {

});

// Disable hiding
//$('.loading-gif').hide();

What you will notice here is that the loading indicator will be shown but only after 3 seconds. That is because the async=false is blocking and that blocking is also preventing the repaint needed to show the image from happening. This happens because not every DOM operation is instantaneous. Some operations, like repainting, wait for the main processing thread to yield before running.

I am positive that you will be able to write your logic in such a way that your constraints are still met but are done in an asynchronous way. I didn't entirely understand what you meant by "to be executed if or else the ajax call is made", but if you get stuck and you can clarify, I could propose a solution.

Search Hashnode