function loadding(w,h,bgurl,loadurl,id,info,c,t)
{
	this.defer = 10;
	this.session = 5;
	this.precise = 70;
	var step;
	var _progress = parseInt(c / t * w);

	if(arguments.length!=8)return;
	document.write('\
	<label style="float:left;">'+info+'</label><label style="float:right;margin-right:2px">'+c+'/'+t+'</label><br clear=both>\
	<div id="'+id+'" style="display:block;width:'+w+'px;height:'+h+'px;background:url('+bgurl+');padding:0px;position:relative;">\
	<div style="position:absolute;top:0px;left:0px;clip:rect(0px '+_progress+'px '+h+'px 0px);width:'+_progress+'px;height:'+h+'px;">\
	<img src="'+loadurl+'"></div></div><br/>\
	');

	step = Math.floor(_progress / this.session / (1000 / this.precise));//pre precise should move piexl
	if(!step)step = 1;

	var hook = document.getElementById(id);	
	hook = hook && hook.getElementsByTagName("div")[0];
	function animation()
	{
		var me = this;
		setTimeout(
			function()
			{
				if(/^rect\((\d+)px,? (\d+)px,? (\d+)px,? (\d+)px\)$/.test(hook.style.clip))
				{
					if(RegExp.$2<_progress)
					{
						hook.style.clip = "rect("+RegExp.$1+"px "+(parseFloat(RegExp.$2)+parseFloat(step))+"px "+RegExp.$3+"px "+RegExp.$4+"px)";
						animation();
					}
				}
			},me.precise
		);
		//document.getElementById('debug').innerHTML = step + "<br>"+hook.style.clip;
	}
	this.trigger = function()
	{
		var me = this;
		setInterval(
			function()
			{
				hook.style.clip = "rect(0px 0px "+h+"px 0px)";
				animation();
			},
			me.defer * 1000
		);
	}
	this.trigger();
}