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

Question

在一个页面上，我有不同的元素，我绑定(bind)了不同的 Ajax 调用。 例如，一个 a.click 正在请求 x.php，同一页面上的另一个 a.click 请求 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