js loading image class

最新推荐文章于 2022-09-27 09:57:46 发布

lgb934

最新推荐文章于 2022-09-27 09:57:46 发布

阅读量1.2k

点赞数

分类专栏： js 文章标签： class Class image Image js JS Js loading

本文链接：https://blog.csdn.net/lgb934/article/details/8442302

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

自己看代码，不解释。

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>

lgb934

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js loading image class

自己看代码，不解释。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 th
复制链接

扫一扫

专栏目录