Ajax loader is not showing up in chrome

Question

I am using an ajax loader (like a please-wait .gif image) image for the ajax calls. Before some days it was working perfectly and showing in chrome.

I didn't see any problem with the image or we don't change it. It is showing correctly in IE, Mozilla and in other browsers but I am not getting why it is not showing in chrome.

I had looked at Ajax Loader Not Showing in Google Chrome but not getting any help.

The html mark-up is

<div id="divajaxProgress" class="progressouter" style="display: none;">
     <div class="ProgressInner">
        <img alt="" title="Please wait..." src="../Images/ajax-loader.gif" />
     </div>
</div>

divajaxProgress will show up when an ajax call will be there, a simple example is page load. Here is the functions

function HideProgress() {                
  $("#divajaxProgress").hide();
}

function ShowProgress() {        
  if ($('#divajaxProgress').is(':visible') == false) {
    $("#divajaxProgress").show();
  }
}

You can see the image here

Please suggest me what is the problem here.

Answer 1

Did you recently change to use synchronous Ajax call?

async: false

If so, I have seen this issue with animation not updating. Most browsers don't get the control back during the synchronous ajax call and does not update the image. However somehow Firefox was updating the image.

Answer 2

try this instead. Tested on chrome!!!

function HideProgress(){
     $('#divajaxProgress').css('display','none');
}

 function ShowProgress() {        

    if($('#divajaxProgress').css('display') == "none"){
        $("#divajaxProgress").show();
    }
 }


    $.ajax({
        url: 'url here',

        type: "post",

        beforeSend: function () {
             ShowProgress();
        },

        error: function(){
           HideProgress();
        },

        success: function (result) {
            alert(result);
            HideProgress();
        }
    })

This might not be the structure of your ajax but make sure you call the ShowProgress() in the beforeSend and call the HideProgress() after the success callback or error callback.