html 提示“数据在加载中，请稍后……”

项目完成了不过因为FileNet加载数据比较慢，所以3-4条记录加载也至少要10几秒，所以客户提出要有一个提示”提示数据加载，请稍后……“这个问题。这个东西开始实现起来不太容易。开始有一个解决方案就是利用一个div,在div里面使用背景图片，加载一个gif动态的图片，再利用div的display可以实现提示。不过这个方法明显的不合适，所以又换了一种实现方式。

效果如下图所示。

js代码如下

var oProgressLayer=null;
function SetBusy(){
for(var iCnt=0;iCnt<document.all.length;iCnt++){
try{document.all[iCnt].oldCursor=document.all[iCnt].style.cursor;
document.all[iCnt].style.cursor='wait';}catch(e){;}
try{document.all[iCnt].oldonmousedown=document.all[iCnt].onmousedown;
document.all[iCnt].onmousedown=function(){return false;}}catch(e){;}
try{document.all[iCnt].oldonclick=document.all[iCnt].onclick;
document.all[iCnt].onclick=function(){return false;}}catch(e){;}
try{document.all[iCnt].oldonmouseover=document.all[iCnt].onmouseover;
document.all[iCnt].onmouseover=function(){return false;}}catch(e){;}
try{document.all[iCnt].oldonmousemove=document.all[iCnt].onmousemove;
document.all[iCnt].onmousemove=function(){return false;}}catch(e){;}
try{document.all[iCnt].oldonkeydown=document.all[iCnt].onkeydown;
document.all[iCnt].onkeydown=function(){return false;}}catch(e){;}
try{document.all[iCnt].oldoncontextmenu=document.all[iCnt].oncontextmenu;
document.all[iCnt].oncontextmenu=function(){return false;}}catch(e){;}
try{document.all[iCnt].oldonselectstart=document.all[iCnt].onselectstart;
document.all[iCnt].onselectstart=function(){return false;}}catch(e){;}
}
}
/************************************************************************************************
// 恢复网页上所有元素可以响应事件，以及设置鼠标光标默认光标
*************************************************************************************************/
function ReleaseBusy(){
for(var iCnt=0;iCnt<document.all.length;iCnt++){
try{document.all[iCnt].style.cursor=document.all[iCnt].oldCursor;}catch(e){;}
try{document.all[iCnt].onmousedown=document.all[iCnt].oldonmousedown;}catch(e){;}
try{document.all[iCnt].onclick=document.all[iCnt].oldonclick;}catch(e){;}
try{document.all[iCnt].onmouseover=document.all[iCnt].oldonmouseover;}catch(e){;}
try{document.all[iCnt].onmousemove=document.all[iCnt].oldonmousemove;}catch(e){;}
try{document.all[iCnt].onkeydown=document.all[iCnt].oldonkeydown;}catch(e){;}
try{document.all[iCnt].oncontextmenu=document.all[iCnt].oldoncontextmenu;}catch(e){;}
try{document.all[iCnt].onselectstart=document.all[iCnt].oldonselectstart;}catch(e){;}
}
}
/************************************************************************************************
// 关闭“正在处理"对话框
*************************************************************************************************/
function HideProgressInfo(){
if(oProgressLayer){
//ReleaseBusy();
oProgressLayer.removeNode(true);
oProgressLayer=null;
}
}
/************************************************************************************************
// 显示“正在处理”对话框 (样式一) 动画光标样式
*************************************************************************************************/
function ShowProgressInfo(){
if(oProgressLayer) return;
oProgressLayer=document.createElement('DIV');
with(oProgressLayer.style){
width='230px';
height='70px';
position='absolute';
left=(document.body.clientWidth-230)>>1;
top=(document.body.clientHeight-70)>>1;
backgroundColor='buttonFace';
borderLeft='solid 1px silver';
borderTop='solid 1px silver';
borderRight='solid 1px gray';
borderBottom='solid 1px gray';
fontWeight='700';
fontSize='13px';
zIndex='999';
}
oProgressLayer.innerHTML=
'<table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">'+
'<tr>'+
'<td align="center" valign="middle">'+
'<img src="/Images/Processing.gif" border="0" align="absmiddle" />'+
'  正在处理数据，请稍候……'+
'</td>'+
'</tr>'+
'</table>';
document.body.appendChild(oProgressLayer);
//SetBusy();
}

这个提示框只是一个提示消息，当然不能阻止用户那好奇的鼠标，下面的的js代码是阻止用户对页面进行操作的

<script language="JavaScript"> 
function ReadonlyText(objText)
{
	 
	if (objText){
		objText.style.backgroundColor = "menu";
		objText.style.color = "black";
		objText.readOnly=true;
	}
}
 

 
 
function DisableElements(container,blnHidenButton)
{
	if (!container) 
	return;
	var aEle;
	if (navigator.appName =="Microsoft Internet Explorer")  //IE
	{
		for (var i=0;i<container.all.length;i++)
		{
			aEle = container.all[i];
			tagName = aEle.tagName.toUpperCase();
			if ((tagName=="SELECT")||(tagName=="BUTTON"))
			{
				aEle.disabled = true;
				if(tagName=="BUTTON" && blnHidenButton)
				{
					aEle.style.display = "none";
				}
			}
			else if (tagName=="INPUT") 
			{
				if (aEle.type.toUpperCase()!="HIDDEN")
				{
					if (aEle.type.toUpperCase()=="TEXT") 
					{
						ReadonlyText(aEle);
					}
					else
					{
						aEle.disabled = true;
					}
				}
				if((aEle.type.toUpperCase()=="BUTTON"||aEle.type.toUpperCase()=="SUBMIT") && blnHidenButton)
				{
					aEle.style.display = "none";
				}
			}
			else if (tagName=="TEXTAREA") 
			{
				ReadonlyText(aEle);
			}
		}
	}
	else
	{
		var aEle = container.getElementsByTagName("select");
		for (var i=0;i< aEle.length;i++)
		{
			aEle[i].disabled = true;
		}
		
		aEle = container.getElementsByTagName("button");
		for (var i=0;i< aEle.length;i++)
		{
			aEle[i].disabled = true;
		}
		
		aEle = container.getElementsByTagName("textarea");
		for (var i=0;i< aEle.length;i++)
		{
			ReadonlyText(aEle[i]);
		}
		
		aEle = container.getElementsByTagName("input");
		for (var i=0;i< aEle.length;i++)
		{
			if (aEle[i].type.toUpperCase()!="HIDDEN")
			{
				if (aEle[i].type.toUpperCase()=="TEXT")
				{
					ReadonlyText(aEle[i]);
				}
				else
				{
					aEle[i].disabled = true;
				}
			}
			if((aEle[i].type.toUpperCase()=="BUTTON"||aEle[i].type.toUpperCase()=="SUBMIT")&&blnHidenButton)
			{
				aEle[i].style.display = "none";
			}
		}
	}
}
 
function DisableLinkElement(oElement) 
{
	
	if (!oElement) 
		return;	
	if (oElement.tagName.toUpperCase()=="A")
	{
		oElement.disabled = true;	
		oElement.onclick = CancelEvent;				
	}			
	
}
 
function DisableLinkElements(container) 
{
	
	if (!container) 
		return;
	var aEle;
	if (navigator.appName =="Microsoft Internet Explorer")  //IE
	{
		for (var i=0;i<container.all.length;i++)
		{
			aEle = container.all[i];
			tagName = aEle.tagName.toUpperCase();
			if ((tagName=="A") && (aEle.id==""))
			{
				aEle.disabled = true;	
				aEle.onclick = CancelEvent;				
			}			
		}
	}
	else
	{
		var aEle = container.getElementsByTagName("a");
		for (var i=0;i< aEle.length;i++)
		{
			if (aEle[i].id == "")
			{
				aEle[i].disabled = true;	
				aEle[i].onclick = CancelEvent;
			}			
		}
	}	
	
}
 
function getElementsChild(formName,elementName,i)
{
	var objReturn;
	var lngLenghth=document.forms[formName].elements[elementName].length;
	lngLenghth=parseFloat(lngLenghth);
	if (lngLenghth + "" == "NaN")
	{
		objReturn = document.forms[formName].elements[elementName];
	}
	else
	{
		objReturn = document.forms[formName].elements[elementName][parseFloat(i)];
	}
	return objReturn;
}

</script>

在jsp页面初始化是调用

ShowProgressInfo()；

然后在数据加载完成以后调用

 HideProgressInfo()；



其他的都不用调用另外如果对图片觉得不满意可以可以更换图片，需要修改代码为src部分


'<table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">'+
'<tr>'+
'<td align="center" valign="middle">'+
'<img src="/Images/Processing.gif" border="0" align="absmiddle" />'+
'  正在处理数据，请稍候……'+
'</td>'+
'</tr>'+
'</table>

这部分代码能完成所需功能，不过不过比较完整的功能。完整的js代码在点击打开链接.