js loading image class

来源：互联网发布：ipad看txt软件编辑：程序博客网时间：2024/05/16 07:56

自己看代码，不解释。

Standby.js

function Standby (obj){this.coverObj;// bei cover objthis.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 scrollvar bodyheight = this.coverObj.clientHeight;var bodywidth = this.coverObj.clientWidth;var dtop = this.coverObj.offsetTop;var dleft = this.coverObj.offsetLeft;// SET DIV CSSif(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";//contentvar 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 divStandby.prototype.show = function(){this.loadingDiv.style.zIndex = this.zIndex;this.loadingDiv.style.display = "block";}// hidden loading divStandby.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>