javascript - 当 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 没有更新。

当 async 设置为 true 时，图像在隐藏到成功 block 之前是可见的。

请建议一种在成功 block 执行之前使图像可见的方法，同时保持异步参数为 false。

在 Chrome 中测试。

Answer 1

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

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