将ajax异步设置为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();
 });