Show loader image on the middle of the page on Ajax request using Jquery.

<script language="javascript" type="text/javascript">
 
$(document).ready(function(){
	// author prabeen. 
	$.AjaxLoader = { 
		// public access 
		ImagePath : "ajax-loader.gif" ,
		// public access 
		BlockerOpacity:0,
		//private access
		ImageObject : null,  
 
		//public access 
		Initialize : function(){ 
			this.PreLoadImage();
		}, 
		//private access
		PreLoadImage: function(){ 
				this.ImageObject =  new Image(); 
				this.ImageObject.src = this.ImagePath;
				this.ImageObject.Height = 50; 
				this.ImageObject.Width  = 50; 
		}, 
		// pulic access
		AppendImageObject: function(){ 
 
			var _position =  this.FindMiddlePosition(); 
			$('body').append(this.ImageObject)
			.find("img:last") 
			.css({'position':'absolute','top':_position[1]+'px','left':_position[0]+'px','z-index':2000})
			.addClass('LoaderImage');
			this.AppendBlocker();
		},
		//private access		
		FindMiddlePosition:function(){ 
			var document_height = $(document).height(); 
			var window_width 	= $(window).width();
			var window_height 	= $(window).height() ;
			var left  =  	Math.round((window_width / 2)- this.ImageObject.Width); 
			var top   = 	Math.round((window_height / 2)- this.ImageObject.Height) + $(document).scrollTop(); 
			return [left,top ]; 
		},
		//public access
		RemoveImageObject:function(){ 
			$('img.LoaderImage').remove(); 
			this.RemoveBlocker(); 
		},
		//private access 
		AppendBlocker:function(){ 
			$('body').append('<div></div>')
			.find(':last')
			.addClass('ajax_blocker') 
			.css({'opacity':this.BlockerOpacity,'display':'block','position':'absolute','top':0,'left':0,'height':$(document).height()+'px','width':$(document).width()+'px','z-index':1000,'background-color':'white'}); 
 
 
		},
		//private access 
		RemoveBlocker :function(){ 
			$('div.ajax_blocker').hide().remove(); 
		}  
 
	} 	
});
</script>

<script> 
$('yourElement').click(function(){ 
	$.ajax({
	   type: "POST",
	   // url of server side script
	   url: "some.php",
	   //your query parameters
	   data: "name=John&location=Boston",
	   //when ajax request is complete 
	   success: function(msg){
		 alert( "Data Saved: " + msg );
	   }
	 });
}); 
</script>

<script> 
// set value for  the 'ImagePath' property  if you want to change the default image path i.e 'images/ajax-loader.gif'
$.AjaxLoader.ImagePath = 'myimagepath.gif'; 
// set value for  the 'BlockerOpacity' property  if you want to change the default opacity of UI blocker  i.e 0 (100% transparency ) .It can be between  0 to 1 
$.AjaxLoader.BlockerOpacity = 0.5; 
// if you want to pre load the loader image otherwise it is not required. 
$.AjaxLoader.initialize(); 
 
$('yourElement').click(function(){ 
 
	//show the loader image and UI blocker becauase we are sending the ajax request.  
	$.AjaxLoader.AppendImageObject()
 
	$.ajax({
	   // request method . 
	   type: "POST",
	   // url of server side script
	   url: "some.php",
	   //your query parameters
	   data: "name=John&location=Boston",
	   //when ajax request is complete 
	   success: function(msg){
 
		 // this method removes the loader image and UI blocker from the DOM  after completion of ajax request. 
		 $.AjaxLoader.RemoveImageObject();
 
		 /*  
		 	your script to manipulate ajax response. 
 
		 */
 
	   }
	 });
}); 
</script>