开发者

jQuery multiple ajax loading animations on calls

On a page I have different element which I bound yo different Ajax calls. For ex开发者_C百科ample one a.click is requesting x.php another one down the same page requests y.php.

What I like to do is place an individual loading image for each. ajaxStart and ajaxStop won't do it since they are fired everytime, no matter which one called.

So how I can do it for individual calls?


You can use the beforeSend and complete callbacks in the individual $.ajax calls like this:

$.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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜