Automatic show ajax loader gif image when any ajax function is called in the application

Question

I have many ajax calls in the application which are performing various operations, I am searching for a Jquery plugin or any other method which will detect any ajax call made and show loading image when operation is in process and hide it after operation is complete.Any help is welcome.

Answer 1

Got a solution for this , I used Pretty Loader and my problem is solved .

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 */
});