Javascript 当ajax async设置为false时，无法查看页面加载程序映像

我在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时，图像在成功块中隐藏之前可见

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

---

在Chrome中测试。

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

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

---

不要使用

async:false

。这是一个更好的模式来使用和解决您的问题。为什么需要它？您的ajax调用是否会进行一些密集的工作？async:false意味着它通过逻辑推导是同步的，当语句触发时，在ajax调用完成之前，它不会冻结页面和所有资源，这意味着在loader.show（）和loader.hide（）之间，如果另一个ajax调用依赖于第一个ajax调用的响应，那么它将发生得如此之快，您将看不到它，为什么不调用success处理程序中的第二个ajax方法，并删除

async:false

，因为这样会冻结浏览器并阻止用户交互，所以显示图像可能是一件好事。至少你的不幸用户会更清楚，当ajax活动进行时，页面将无法工作。我怀疑这不会工作。“ajaxStart”事件，如果jQuery将其“激发”为一个简单的函数调用（我认为是真的），那么它实际上是与原始代码相同的代码。如果它是通过浏览器内部作为真实事件触发的，那么在同步调用后返回“click”事件之前，事件循环不会运行。