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
精彩评论