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

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

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

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

效果如下图所示。

2f4a0ccd1a389c37350681003030cc07.png

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=

‘+

‘+

Processing.gif‘+

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

‘+

‘+

‘;

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部分

‘+

‘+

Processing.gif‘+

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

‘+

‘+

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/219229.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 微信推送消息遇到的坑 – 返回error code 40008,并且发送不成功[通俗易懂]

    微信推送消息遇到的坑 – 返回error code 40008,并且发送不成功[通俗易懂]api文档就是这里啦。https://work.weixin.qq.com/api/doc#90000/90135/90236/%E6%96%87%E6%9C%AC%E6%B6%88%E6%81%AF我感觉腾讯并没有把这个errorcode做得很细,反之,非常笼统,让你看到这个err不知所措不晓得到底啥问题。我这边要用微信接收系统发出来的alert,比如哪个服务器cpu负荷…

  • C++中的static成员函数以及static成员变量详解「建议收藏」

    C++中的static成员函数以及static成员变量详解

  • 500-内部服务器错误_打开网页500错误怎么解决

    500-内部服务器错误_打开网页500错误怎么解决我win2003的操作系统,部署了asp网站到服务器上,但是,奇怪的是只能进入前台,每次进入后台都出现HTTP500-内部服务器错误真实郁闷坏了,用百度搜索了半天,大都是转载的千篇万律而且长篇大论的解决办法什么帐户密码不同步之类啊,误导我了呀,害我费劲了很大半天。没有想到,只是在一个小小的操作上就解决了。窃喜。一、启用Asp支持WindowsServer2003默认安

  • pki密码技术_PKI体系管理

    pki密码技术_PKI体系管理HTTPS的诞生可先参考网络协议、HTTPS协议等文章明文传输对称加密“加密”和“解密”使用【相同的】密钥,如果密钥可以安全的传输,那么消息也应该可以安全的传输。非对称加密上述非对称加密与对称加密效果基本一样,如果公钥可以安全的传输,那么消息也应该可以安全的传输,接下来看看被劫持的情况。窃听者可以伪造服务器的公钥与客户端通讯,客户端以为是跟服务器通讯,其实是与窃听者在通讯。无论是对称加密还是非对称加密,都遗留了一个问题没有解决,那就是如何证明我们访问的网站就是我们

  • Python—正则表达式建议收藏

    1.re包常用函数match(pattern,string,flags=0)search(pattern,string,flags=0)区别:match从头开始匹配,若不符合则匹配失败

    2021年12月18日
  • 安全帽识别软件使用中常见问题分析[通俗易懂]

    安全帽识别软件使用中常见问题分析[通俗易懂]一、安全帽识别软件的主要功能是什么?安全帽识别是通俗的说法,相对准确的名称应该是安全帽佩戴检测,是用深度学习的算法对视频流进行分析,通过人工智能来判断视频中的人是否未佩戴安全帽,如果未佩戴,则触发告警规则。二、安全帽识别软件的技术成熟吗?2012年人工智能领域的卷积神经网络迎来重大突破,深圳强美随即将此尖端技术应用于工业安全监控,因为掌握海量样本数据的先天优势,鹰眸安全帽(佩戴检测)识别系…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号