javascript - 调用时的 jQuery 多个 ajax 加载动画

Question

在一个页面上，我有不同的元素，我绑定(bind)了不同的 Ajax 调用。例如，一个 a.click 请求 x.php，同一页面下的另一个请求 y.php。

我喜欢为每个人放置一个单独的加载图像。ajaxStart 和 ajaxStop 不会这样做，因为它们每次都会被触发，无论调用哪个。

那么我该如何为个人通话做这件事呢？

Answer 1

您可以在单独的 $.ajax 调用中使用 beforeSend 和 complete 回调，如下所示:

$.ajax({
  url: 'myPage1.html',
  beforeSend: function() { 
    $("#loading1").fadeIn();
  },
  success: function(data) {
    //Current code
  },
  complete: function() {
    $("#loading1").fadeOut('fast');
  }
});


$.ajax({
  url: 'myPage2.html',
  beforeSend: function() { 
    $("#loading2").fadeIn();
  },
  success: function(data) {
    //Current code
  },
  complete: function() {
    $("#loading2").fadeOut('fast');
  }
});

See here for a full list of available callbacks