Loader not working during synchronous ajax call in chrome

Question

Loader not working during a synchronous(Async:false) ajax call in google chrome. Working fine in Firefox & IE. During my debug testing, Loader showing until ajax request start. getting struck off or disappears when request sent to server, where I kept a debug point. I have tried other solutions like use of ajaxStart, beforeSend & ajax loader ect., But no use. Please give valid solution

 <div id="LoaderDiv" style="display: none">
    <img id="ImageLoader" src="Images/loading.gif" />
 </div>

            $('#LoaderDiv').show();
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: servicePath,
                async: false,
                success: function (data) {
                    console.log(data.d);
                    $('#LoaderDiv').hide();
                }
            });

Maybe put the ajax call inside another function and use setTimeout to call it after 100 mss or something small? — artm, Nov 13 '14 at 10:10
See http://stackoverflow.com/questions/26906278/show-modal-loading-div-is-not-running-in-google-chrome-and-ie-browsers-firefox — artm, Nov 13 '14 at 10:14
@Apul Gupta: Yes, but that will happen only when developer tools opened, if not, loader not even visible. — John Wink, Nov 13 '14 at 10:30
In sync mode, the previous call of show() maybe stuck. You should use timeout for `$('#LoaderDiv').show();`, not ajax call. — Mavlarn, Nov 13 '14 at 11:06
sorry I did not get your question. The gif was first showing and then after the request is sent to the server it disappeared. That is what I expect too. am I missing something? — dsharew, Mar 24 '15 at 07:48
@Degen Sharew: Thanks for ur Interest. Actually, my requirement is to show loading icon until the request returns from server during a synchronous ajax call. but it is not working in case of google chrome. — John Wink, May 21 '15 at 10:20
@KiranNuthanapati check my answer for long comment :-) and possible solution. — dsharew, May 21 '15 at 11:45

score 10 · Accepted Answer · answered Jan 19 '16 at 12:44

I was also facing same problem from last 1 year Even with async: false. Finally got a best solution, but not sure that it will work in you case, it worked me 101%.

Below is code:-

    $.ajax({ 
                .. , 
             beforeSend: function () { showLoader(); },

             success: function (data) { hideLoader(); } 
    });


function showLoader() {
    $("#progressbar").css("display", "");
}

function hideLoader() {
    setTimeout(function () {
        $("#progressbar").css("display", "none");
    }, 1000);
}

you can make these two function common in any common javascript file. So that you can call these function multiple places or js files.

Html is :

<div class="spinnermodal" id="progressbar" style="display: none; z-index: 10001">
  <div style="position: fixed; z-index: 10001; top: 50%; left: 50%; height:65px">
      <img src="~/Images/loading.gif" alt="Loading..." />
    </div>
</div>

Css is:

.spinnermodal {
        background-color: #FFFFFF;
        height: 100%;
        left: 0;
        opacity: 0.5;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 100000;
    }

Try this. I hope it will work for you as well. Happy coding :-)

The spinner might not show as well when using async=false, so if above answer does not still show the loader, try removing this, it resolved issue for me. — Aditya, May 25 '20 at 14:25

score 7 · Answer 2 · answered Sep 08 '17 at 12:48

7

Put setTimeout before the ajax request. I have tried many solutions but this one definitely works.

$("#loader").show();
setTimeout(function () {
  //AJAX REQUEST CODE
  $("#loader").hide();
},10);

answered Sep 08 '17 at 12:48

chirag

523
7
13

score 2 · Answer 3 · answered Mar 17 '17 at 05:45

2

Or simply this

$.ajax({ 
                    .. , 
                 beforeSend: function () { $('#LoaderDiv').show(); },

                 success: function (data) { $('#LoaderDiv').hide(); } 
        });

which will make it little more fast

answered Mar 17 '17 at 05:45

Binoy Kumar

422
3
17

score 1 · Answer 4 · answered Aug 23 '18 at 05:11

Don't use async: false, Solution is this:-

var requestStatus = 1;
$('#LoaderDiv').show();
if( requestStatus != 0) {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: servicePath,
                beforeSend: function() {
                   requestStatus = 0;
                },
                success: function (data) {
                    console.log(data.d);
                    $('#LoaderDiv').hide();
                    requestStatus = 1;
                }
            });
}

score 0 · Answer 5 · answered May 21 '15 at 11:45

I tried it in google-chrome it is working. May be check if you have any other error or try to post more code if you are leaving out some code on your question.

check your code on jsfiddle, it is working.

I only added this to your code:

error: function(data){
                       $('#LoaderDiv').hide(); 
               }

But notice I added the error handle function because with out it the image ( your gif ) will show forever when error happens. ( If you were getting any error response from the server then this will be a solution)

score 0 · Answer 6 · answered Jun 16 '22 at 09:09

Just set little time out for your ajax call to fix loader issue:

setTimeout(function () {
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: servicePath,
        async: false,
        success: function (data) {
            console.log(data.d);
            $('#LoaderDiv').hide();
        }
    });
}, 500);

Loader not working during synchronous ajax call in chrome

6 Answers6

Linked