Question

I have this code

<script>
$(document).ready(function () {
    $('#loading').hide().ajaxStart(function() {
            $(this).show();
         }).ajaxStop(function() {
            $(this).hide();
        });
});
</script>

When I initially perform an action that an AJAX call is being made, the loading image displays and starts rotating but in that AJAX call, I call multiple other AJAX calls and the loading image exhbits different behavior depending on the browser.

Firefox = Works as intended. When I perform action that executes AJAX, it displays loading image until AJAX call is completed.

Google Chrome = Starts to work, the loading image loads but as soon as other AJAX calls are executed (from the initial one, in the success phase), the loading image freezes and doesn’t animate again.

IE9 / Safari = Simply does not render the loading image.

I want the other browsers to work it just like Firefox. Any ideas why this may be happening?

Answer 1

So yes, the issue is certainly with async : false, thanks everyone.