Automatically display gj image of ajax loader when any ajax function is called in application

Question

I have many ajax calls in the application that perform various operations, I am looking for a JQuery plugin or any other method that will detect any ajax call made and displaying a loading image when the operation is in progress, and hide it after the operation is completed. Any help is appreciated.

Answer 1

Having gotten a solution for this, I used Pretty Loader , and my problem is resolved.

Answer 2

$( document ).ajaxStart(function() {
    ShowLoading(1);
});
$( document ).ajaxComplete(function() {
    ShowLoading(0);
});

Answer 3

$.ajax({
    url: "test.html",
    context: document.body
}).beforeSend(function() {
    /* show loader */
}).success(function(){
    /* hide loader */
});