Ajax 加载完成后 jQuery 执行加载消息！

Question

这似乎让我发疯。

我尝试在进行 ajax 调用之前显示 ajax 加载器 gif。 Firefox 是唯一一个能够按顺序执行此操作的浏览器。所有其他浏览器都会先完成 ajax 调用，然后显示加载程序。

这是代码：

$(#element).click(function(evt){

  tmp_eleX = $this.offset().left;  // get current left position of element 
  tmp_eleY = $this.offset().top;   // get current top position of element  

  $('#ajax_loader').css({top: tmp_eleY-208}); // show ajax loader which was placed outside viewable area (-9999)

  $.ajax({
    url: "some_file.cfm",
    cache: false,
    dataType: "html",
    async: false, // wait for loading to finish before continuing code
    timeout: 30000,
    error: function(){
      return true;
    },
    success: function(data) {
      $('#someelementtoinject_ajaxdata').html(data);
    }
  });                        

  $('#ajax_loader').css({top: -9999}); // move ajax loader off screen - for testing i comment out this line to see when the loader shows!

});

这让我抓狂。我尝试在所有浏览器中的 ajax 调用之前将 Ajax 调用包装在

window.setTimeout(function(){
}, 0);

Ajax 加载器显示中，问题是动画 GIF 在 ajax 完成加载内容之前不会进行动画处理！

我也尝试过：

  $('#ajax_loader')
    .ajaxStart( function() {
      $(this).css({
        top: -208
      })
    })
    .ajaxStop(function(){
      $(this).css({
        top: -1000                          
      })
    });

相同的结果 Ajax 在 .ajaxStart 触发之前完成，哎呀：/！在这里，只有 Firefox 可以正常工作并在 ajax 调用之前显示动画。

它似乎在所有浏览器中工作的唯一方法是设置 ajax 调用“async: true”。在继续之前完全加载 ajax 并可能触发页面上的另一个 ajax 调用对于 ajax 来说是至关重要的。

关于如何在ajax完成之前触发加载程序的任何想法？另外，ajax 需要在代码继续之前完成。

我没想到这个@^&^#@我的大脑在流血:/

Answer 1

async: false, // wait for loading to finish before continuing code

这似乎是你的问题 - 你没有异步进行 AJAX 调用，因此（我猜），控制权不会返回到浏览器，因此它无法响应“显示 gif”操作，直到AJX 调用返回后。

Answer 2

感谢您的快速回答...

我通过添加一个全局变量解决了问题，这也使其成为放置 async: true 的选项。我将全局标志设置为 ajax 调用的成功函数中的最后一个操作。