Loader not working during synchronous ajax call in chrome

问题

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

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

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

回答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)

回答4:

Or simply this

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

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

which will make it little more fast

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

来源：https://stackoverflow.com/questions/26906172/loader-not-working-during-synchronous-ajax-call-in-chrome

标签

jquery

ajax

google-chrome

synchronous