Question

这似乎让我感到沮丧。

我在进行ajax调用之前尝试显示ajax loader 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 Loader在所有浏览器中的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。

我没想到这个@ ^＆amp; ^＃@我的大脑正在流血：/

Answer 1

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

这似乎是你的问题 - 你不是异步进行AJAX调用，因此（我猜），控件没有返回浏览器，所以它无法响应'show the gif '直到AJX呼叫返回后的动作。

Answer 2

感谢您快速回答......

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

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

2 个答案: