当ajax async设置为false时，无法看到页面加载器图像

Question

我在ajax调用之前显示加载图像，并在成功时隐藏它。

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

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

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

            ...some lines of code

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

        }  
    });
});

当async为false时，图像不会显示，可能是因为在执行javascript时UI未更新。

当异步设置为true时，图像在成功块中隐藏之前是可见的。

请建议一种在成功块执行之前使图像可见的方法，将async参数保持为false。

在Chrome中测试。

Answer 1

您是否尝试过全局ajaxStart和ajaxStop事件：

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