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

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

效果如下图所示。

js代码如下

var oProgressLayer=null;

function SetBusy(){

for(var iCnt=0;iCnt

try{document.all[iCnt].oldCursor=document.all[iCnt].style.cursor;

document.all[iCnt].style.cursor=’wait’;}catch(e){;}

try{document.all[iCnt].oldοnmοusedοwn=document.all[iCnt].onmousedown;

document.all[iCnt].οnmοusedοwn=function(){return false;}}catch(e){;}

try{document.all[iCnt].oldοnclick=document.all[iCnt].onclick;

document.all[iCnt].οnclick=function(){return false;}}catch(e){;}

try{document.all[iCnt].oldοnmοuseοver=document.all[iCnt].onmouseover;

document.all[iCnt].οnmοuseοver=function(){return false;}}catch(e){;}

try{document.all[iCnt].oldοnmοusemοve=document.all[iCnt].onmousemove;

document.all[iCnt].οnmοusemοve=function(){return false;}}catch(e){;}

try{document.all[iCnt].oldοnkeydοwn=document.all[iCnt].onkeydown;

document.all[iCnt].οnkeydοwn=function(){return false;}}catch(e){;}

try{document.all[iCnt].oldοncοntextmenu=document.all[iCnt].oncontextmenu;

document.all[iCnt].οncοntextmenu=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

try{document.all[iCnt].style.cursor=document.all[iCnt].oldCursor;}catch(e){;}

try{document.all[iCnt].οnmοusedοwn=document.all[iCnt].oldonmousedown;}catch(e){;}

try{document.all[iCnt].οnclick=document.all[iCnt].oldonclick;}catch(e){;}

try{document.all[iCnt].οnmοuseοver=document.all[iCnt].oldonmouseover;}catch(e){;}

try{document.all[iCnt].οnmοusemοve=document.all[iCnt].oldonmousemove;}catch(e){;}

try{document.all[iCnt].οnkeydοwn=document.all[iCnt].oldonkeydown;}catch(e){;}

try{document.all[iCnt].οncοntextmenu=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=

‘

‘

‘+

‘

‘+

‘‘+

‘  正在处理数据，请稍候……’+

‘

‘+

‘

‘+

‘

‘;

document.body.appendChild(oProgressLayer);

//SetBusy();

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

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

{

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

{

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;

}

在jsp页面初始化是调用

ShowProgressInfo()；

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

HideProgressInfo()；

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

‘

‘

‘+

‘

‘+

‘‘+

‘  正在处理数据，请稍候……’+

‘

‘+

‘

‘+

‘

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