jQuery "Loader" plugin

Description

This is a simple but hard to find plugin that should be appeared in all the dynamic images or layers

Demonstration

<p align="center"><img id="myPic" width="256" height="192" style="border:1px dashed #000"/></p>
<p align="center"><input type="button" value="load picture" id="btnLoadImg"/></p>
<hr/>
<center><div id="defaultText" style="width:500px;height:300px;border:1px solid #999"></div></center>
<p align="center"><input type="button" value="load Page" id="btnLoadPage"/></p>
<script type="text/javascript" src="/js/jquery.loader.js"></script>
<script type="text/javascript">
(function($){
$(document).ready(function(){
	$("#myPic").addLoader();
	$("#btnLoadImg").click(function(){
		$("#myPic").useLoader("/images/christmas-small.jpg",function(){alert("Image loaded!")})
	});
	$("#defaultText").addLoader();
	$("#btnLoadPage").click(function(){
		$("#defaultText").useLoader("/sandbox/defaultText.php",function(){alert("Page loaded!")})
	});
});
})(jQuery);
</script>

jQuery Plugin Source Code

The following is the source code of the jQuery Plugin.

<script type="text/javascript">
(function($){
	function Loader(target,p1){
		if(target){
			var image;
			if (typeof p1=="string"){ 
				image=(p1=="")?"../images/zoomloader.gif":p1;
			}
			else image="../images/zoomloader.gif";
			var jNode=$('<div style="-moz-opacity:0.8;opacity:0.8;filter:alpha(opacity=80);color:#333;font-size:12px;font-family:Tahoma;'
				+'text-align:center;background-image:url('+image+');position:absolute;'
				+'background-repeat:no-repeat;background-position:43px 30px;width:100px;height:55px;z-index:999;'
				+'">Loading</div>').appendTo("body");
			this.target=$(target).data("Loader",this).load(function(){
				jNode.remove();
				$(this).data("Loader").callBack();
			});
			var t=parseInt(this.target.offset().top+(this.target.height()-jNode.height())/2);
			var l=parseInt(this.target.offset().left+(this.target.width()-jNode.width())/2);
			this.jNode=jNode.css({top:t,left:l})
		}
	}
	Loader.prototype.callBack=function(){
		if(typeof this.callBack=="function") this.callBack();
	}
	Loader.prototype.load=function(href,callBack){
		var cb=this.callBack=callBack,jNode=this.jNode;
		if(this.target[0].nodeName.toLowerCase()=="img")this.target.attr("src",href)
		else this.target.load(href,function(){
			jNode.remove();
			if(typeof cb=="function")cb()
		})
	}
	$.fn.addLoader=function(image,callBack){new Loader(this,image,callBack)}
	$.fn.useLoader=function(href,callBack){this.data("Loader").load(href,callBack)}
})(jQuery);
</script>

Download the plugin

Click the link for downloading the plugin.

Copyright and licensing

All the plugin source codes and the examples are copyright of C. F., Wong
Please feel free to use any code listed in this page, they are licensed under the MIT License:
http://www.opensource.org/licenses/mit-license.php