js实现进度条遮罩效果

来源：互联网发布：cad简易画图软件编辑：程序博客网时间：2024/05/22 17:12

摘要：现在需要在页面一加载的时候出现进度条，并遮罩整个页面，等加载完之后取消进度和遮罩。
思想：需要借辅助页面二，页面二加载的时候调用js方法init(),init做两个动作，
动作一：显示进度条和遮罩区域。
动作二：传递url，提交action到后台查询页面一的数据，当跳转到页面一的时候，加载页面一，调用页面二的js方法隐藏掉进度条和遮罩区域。

页面二的部分代码：
//页面初始化
function windowOnload(){
     showMask();
     var url = "XX.do";
     window.list2.location.href=url;
}
//加载loading
function showMask(){
var divMask = document.getElementById("divMask");
var divLoad = document.getElementById("divLoad");
divMask.style.display="block";
var vwidth = document.body.offsetWidth+20;
var vheitht = document.body.offsetHeight;
divMask.style.width=vwidth;
divMask.style.height=vheitht;
divLoad.style.display="block";
divLoad.style.top=(vheitht-200)/2;
divLoad.style.left=(vwidth-200)/2;
}
//隐藏loading
function hideMask(){
var divMask = document.getElementById("divMask");
var divLoad = document.getElementById("divLoad");
divMask.style.display="none";
divLoad.style.display="none";
}
<body onload="windowOnload();" style="overflow: hidden">

<iframe id="iframepage" name="list2" width="100%" height="100%"scrolling="auto" border="0" frameborder="0" marginheight="0" marginwidth="0"></iframe>

<div id="divMask" style="filter:Alpha(opacity=30);display:none;background-color:#ffffff;position:absolute;top:0;left:0;z-index:1;"></div>

<div id="divLoad" style="display:none;position:absolute;z-index:4;">
    <img src="/web/dms/images/loading10.gif">
</div>
</body>
页面一的代码：
$(document).ready(function(){
window.parent.hideMask();
});