showLoading

function createDiv() { if(document.body!=null) { var div_show_d=document.getElementById('div_show_d'); if(div_show_d==null||div_show_d==undefined) { div_show_d=document.createElement(" "); document.body.appendChild(div_show_d); //創建Marquee CreateMarquee(div_show_d); div_show_d.style.display="none"; } } } function createFrame() { if(document.body!=null) { var frame_test=document.getElementById('frame_test'); if(frame_test==null||frame_test==undefined) { frame_test=document.createElement(" id='frame_test' scrolling='no' frameborder='0' style='position:absolute; top:0px; left:0px; display:none;background-color:#000000;filter : Alpha(Opacity=60 , style=0);'>"); document.body.appendChild(frame_test); //創建Marquee frame_test.style.display="none"; } } } function showDiv() { var div=document.getElementById('div_show_d'); if(div!=null||div!=undefined) { div.style.height="100%"; div.style.width="100%"; div.style.position = "absolute"; div.style.top = "0px"; div.style.left = "0px"; div.style.zIndex = 999 ; div.style.display="block"; CreateMarquee(div); } } function showFrame() { var frame=document.getElementById('frame_test'); if(frame!=null||frame!=undefined) { frame.style.height="100%"; frame.style.width="100%"; frame.style.position = "absolute"; frame.style.top = "0px"; frame.style.left = "0px"; frame.style.zIndex = 998 ; frame.style.display="block"; } } function HideDiv() { var div=document.getElementById('div_show_d'); if(div!=null||div!=undefined) { document.body.removeChild(div); } } function HideFrame() { var frame=document.getElementById('frame_test'); if(frame!=null||frame!=undefined) { document.body.removeChild(frame); } } function displayWaiting() { if(document.readyState=="loading") { createDiv(); createFrame(); showDiv(); showFrame(); } } function CreateMarquee(obj) { var mySpan=document.createElement("marquee"); mySpan.innerText="Loading......" ;//顯示于頁面的提示文字 mySpan.style.position="absolute"; mySpan.style.top="50%"; mySpan.style.width='100%'; mySpan.style.left="0px"; //mySpan.style.backgroundColor="#C3DAF5";//文字的背景顏色 mySpan.style.color="blue";//文件的字體顏色 mySpan.scrollDelay="100"; obj.appendChild(mySpan); } window.οnlοad=function() { document.body.style.width="100%"; document.body.style.height="100%"; HideDiv(); HideFrame(); } document.body.οnclick=function() { var obj=window.event.srcElement; if(obj!=undefined) { if(document.readyState!="loading") { setTimeout("displayWaiting()",300); } } } document.onreadystatechange=function() { if(document.body!=null) { _state=document.readyState; if(_state=="complete") { HideDiv(); HideFrame(); } } } 使用说明: 将该JS添加到HTML页面中的Body标签后即可。注意页面命名中不能出现JS中的ID号。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
遮罩用途及效果 ShowLoading这个jQuery插件设计用于当运行Ajax请求时,可以在屏幕某一特殊区域(id,class或者html标签)覆一张正在加载中的图片。 有时候我们页面调用后台程序时间比较长时,前台页面暴露在用户之下,如果用户点击可能会造成逻辑混乱。这时候,遮罩就起到了很好的效果,在触发后台程序时我们将前台页面遮住,不让操作,同时给予一个程序运行请等待的效果。 遮罩效果: 二、JQuery遮罩UI实现 <link href="style/showLoading.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery.showLoading.min.js"></script> 三、使用方法 假设html页面有有一个class为add_test_img的标签,需要通过ajax访问后台,并在add_test_img标签中显示一些相关内容,在内容显示之前,可对add_test_img标签使用遮罩,防止在数据显示之前,被修改其中的内容 复制代码 //显示遮罩 $(".add_test_img").showLoading(); //ajax调用 $.ajax({ type: "GET", url: "Api.php", data: {ApiTarget: 'TestImage', op: 'paginateByClassId', prj_id: prj_id, class_id:class_id, page: index, per_page: items_per_page, user_id: user_id, start_date:start_date_str, end_date:end_date_str}, success: function(response){ //对返回数据进行处理,并显示 //...... //去除遮罩 $(".add_test_img").hideLoading(); }, error: function(xhr) { //显示失败信息 //...... //去除遮罩 $(".add_test_img").hideLoading(); } });

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值