Unable to see page loader image when ajax async is set as false

Question

I am showing a loading image before an ajax call and hiding it when the success comes.

$('#Search').on('click', function (e) {

    $('#loaderImg').show();

    $.ajax({
        url: '',
        data: '',
        async: false,
        success: function (response) {

            ...some lines of code

            $('#loaderImg').hide();

        }  
    });
});

When the async is false the image is not shown, maybe because the UI is not updated when javascript is executing.

When async set as true the image is visible before it is hidden in success block.

Please suggest a way to make the image visible before the success block executes keeping the async parameter as false.

Tested in Chrome.

Answer 1

Have you tried global ajaxStart and ajaxStop events:

$('#loaderImg').bind('ajaxStart', function(){
      $(this).show();
 }).bind('ajaxStop', function(){
      $(this).hide();
 });