自己看代码,不解释。
Standby.js
function Standby (obj){
this.coverObj;// bei cover obj
this.loadingDiv; // loading div
/* set loading div z-Index ,if you don't use 2 loading div ,don't need to use this function
the z-Index greater will dispaly over the less z-Index loading div.
*/
this.zIndex = 2000;
/* you can change the loading image url */
this.loadingImgUrl = "http://www.leinhaeupl-neuber.de/img/loading_animated2.gif";
/* loading image size */
this.loadingImgWidth = '23px';
this.loadingImgHeight='23px';
this.loadingDiv = document.createElement("div");
document.body.appendChild(this.loadingDiv);
try{
if(typeof(obj)== 'object'){
this.coverObj = obj;
if(obj.id){
this.loadingDiv.id = obj.id+'_loadingDiv';
}
}else if (typeof(obj) == 'string'){
this.coverObj = document.getElementById(obj);
this.loadingDiv.id = obj+'_loadingDiv';
}else{
throw "obj has error!";
}
}catch(e){
var msg = "Can't not find the component by id["+obj+"],plaese check!!";
alert(msg);
//console.log(msg+" error :"+e);
}
//console.log(this.coverObj);
var dheight = this.coverObj.offsetHeight;
var dwidth = this.coverObj.offsetWidth;
//for body not to show scroll
var bodyheight = this.coverObj.clientHeight;
var bodywidth = this.coverObj.clientWidth;
var dtop = this.coverObj.offsetTop;
var dleft = this.coverObj.offsetLeft;
// SET DIV CSS
if(this.coverObj == document.body ){
this.loadingDiv.style.height = bodyheight;
this.loadingDiv.style.width = bodywidth;
}else{
this.loadingDiv.style.height = dheight;
this.loadingDiv.style.width = dwidth;
}
this.loadingDiv.style.display = "none";
this.loadingDiv.style.position = "absolute";
//this.loadingDiv.style.float = "left";
this.loadingDiv.style.left = dleft;
this.loadingDiv.style.top = dtop;
this.loadingDiv.style.backgroundColor = "#fff";
this.loadingDiv.style.border = "solid 1px #cccccc";
this.loadingDiv.style.overflowX = "hidden";
//this.loadingDiv.style.verticalAlign = "middle";
//this.loadingDiv.style.textAlign = "center";
//content
var contentObj = document.createElement("span");
this.loadingDiv.appendChild(contentObj);
//set font
//contentObj.innerHTML="loading...";
contentObj.innerHTML = "<img src='"+this.loadingImgUrl+"' width='"+this.loadingImgWidth+"' height='"+this.loadingImgHeight+"'/>"
contentObj.style.height = this.loadingImgHeight;
contentObj.style.width = this.loadingImgWidth;
contentObj.style.display = "block";
//contentObj.style.lineHeight = parseInt(this.loadingDiv.style.height);
contentObj.style.marginTop = (parseInt(this.loadingDiv.style.height) - parseInt(contentObj.style.height))/2 + 'px';
contentObj.style.marginLeft = (parseInt(this.loadingDiv.style.width) - parseInt(contentObj.style.width))/2 + 'px';
//contentObj.style.textAlign = "center";
//contentObj.style.whiteSpace = "nowrap"; // not allow to 2 line
}
// show loading div
Standby.prototype.show = function(){
this.loadingDiv.style.zIndex = this.zIndex;
this.loadingDiv.style.display = "block";
}
// hidden loading div
Standby.prototype.hidden = function(){
this.loadingDiv.style.display = "none";
}
testStandby.html
<HTML>
<HEAD>
<style>
</style>
<script src="Standby.js" type="text/javascript"></script>
</HEAD>
<BODY >
<div id="div1">
asdfsadfsd
<table id="table1" border="1px" style="background-color:#ff0;">
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
</tr>
<tbody>
<tr>
<td>test1</td>
<td>test1</td>
<td>test1</td>
</tr>
<tr>
<td>test1</td>
<td>test1</td>
<td>test1</td>
</tr>
<tr>
<td>test1</td>
<td>test1</td>
<td>test1</td>
</tr>
</tbody>
</table>
asdfasdf<br/>
asdfas<br/>
asdf<br/>
<input type="text" id="input1" value="asdfsadfasdf" /><br/>
<input type="text" id="input2" value="asdfsadfasdf" />
</div>
sadfasdfwer
<script>
// must run after all the html load;
var standby0 = new Standby(document.body);
standby0.zIndex=200000;
standby0.show();
var standby = new Standby("div1");
standby.zIndex =20000;
standby.show();
var standby1 = new Standby("table1");
standby1.zIndex = 2000;
standby1.show();
var standby2 = new Standby("input1");
standby2.zIndex = 2000;
standby2.show();
var standby3 = new Standby(document.getElementById('input2'));
standby3.zIndex = 2000;
standby3.show();
var i = 3000;
setTimeout("standby0.hidden()",i);
setTimeout("standby.hidden()",i*2);
setTimeout("standby1.hidden()",i*3);
setTimeout("standby2.hidden()",i*4);
setTimeout("standby3.hidden()",i*4);
</script>
</BODY>
</HTML>