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

【问题标题】：jQuery Executing Loading Message After Ajax Finished Loading!jQuery 在 Ajax 完成加载后执行加载消息！
【发布时间】：2011-07-25 09:33:48
【问题描述】：

这似乎让我发疯了。

我尝试在进行 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 调用包装在

中

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

Ajax 加载器在所有浏览器中的 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 调用中的 success 或 completed 之前将加载程序移出屏幕？
我认为这是没有 dom 操作的最快方法。 loader 元素已经存在。这样做对我来说似乎很自然。根据单击的元素，加载程序在屏幕上具有不同的位置，触发位置更改似乎是最好的解决方案。但考虑到我遇到的结果和问题，我完全愿意接受其他建议。
在完成 ajax 之前不要移动加载器，否则它会在屏幕上和屏幕外快速闪烁。

标签： jquery ajax loader

【解决方案1】：

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

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

【讨论】：

我认为将它放在 setTimeout 包装器中会有所帮助，它确实做到了，但 gif 动画没有动画。是否有其他方法可以检查负载是否已完成以便随后正常工作？
最简单的解决方案是异步执行 AJAX 调用（毕竟，这就是 AJAX 的“A”所代表的意思）。但是，如果您希望在执行 AJAX 调用时阻止用户表单执行其他操作，这会引入问题。这完全取决于您如何看待应用程序的工作流程。

【解决方案2】：

感谢您的快速回答...

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

【讨论】：