show loading gif image

Question

Hello,

 

I am trying to show loading gif image before starting of ajax and hide after its completion but it's not working. can anyone guide me ? 

 

My code is for ajax function:

 

onSave: function (data) {

$.ajax({

type: "POST",

url: pageUrl + "/GetCapturedImage",

data: '',

contentType: "application/json; charset=utf-8",

dataType: "json",

beforeSend: function(){

$('#loading').show()

},

complete: function(){

$('#loading').hide();

},

success: function (r) {

$("[id*=imgCapture]").css("visibility", "visible");

$("[id*=imgCapture]").attr("src", r.d);

},

failure: function (response) {

alert(response.d);

}

});

}

 

and for HTML:

 

<div class="loading" id="loading" align="center">

Loading. Please wait.<br />

<br />

<img src="image/ajax-loader.gif" alt="" />

</div>