<div id="loaderImage"></div>
<script type="text/javascript">
var preLoaderImage = function(){
   this.cImageTimeout=false;
   this.cIndex=0;
   this.cXpos=0;
   this.cPreloaderTimeout=false;
   clearTimeout(this.cImageTimeout);
   this.cImageTimeout=0;
}

preLoaderImage.prototype.startLoader = function() {
   genImage = new Image();
   genImage.anim = this;
   genImage.onload=function (){this.cImageTimeout=setTimeout(this.anim.startAnimation, 0)};
   genImage.onerror=new Function('alert(\'Could not load the image\')');
   genImage.src='/resources/preloader/images/sprites.gif';

}

preLoaderImage.prototype.startAnimation = function(){
	document.getElementById('loaderImage').style.backgroundImage="url('/resources/preloader/images/sprites.gif')";
	document.getElementById('loaderImage').style.width='124px';
	document.getElementById('loaderImage').style.height='128px';
	this.cPreloaderTimeout=setTimeout('this.anim.continueAnimation()', 0.1);
}
	
preLoaderImage.prototype.continueAnimation = function(){
	this.cXpos += 124;
	//increase the index so we know which frame of our animation we are currently on
	this.cIndex += 1;
	//if our this.cIndex is higher than our total number of frames, we're at the end and should restart
	if (this.cIndex >= 20) {
		this.cXpos =0;
		this.cIndex=0;
	}
	if(document.getElementById('loaderImage'))
		document.getElementById('loaderImage').style.backgroundPosition=(-this.cXpos)+'px 0';
	this.cPreloaderTimeout=setTimeout('this.continueAnimation()', 58);
}
	
preLoaderImage.prototype.preLoaderStop = function(){//stops animation
	clearTimeout(this.cPreloaderTimeout);
	this.cPreloaderTimeout=false;
}
	
	a=new preLoaderImage();
   a.startLoader();
</script>