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();
                }
            });

Answer 1

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 :-)

Answer 2

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);

Answer 3

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)

Answer 4

Or simply this

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

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

which will make it little more fast

Answer 5

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;
                }
            });
}