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