show loading gif image

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:

Loading. Please wait.