JS判断页面加载状态以及添加遮罩和缓冲动画的代

作者: 今晚买四不像计算  发布:2019-09-15

复制代码 代码如下:

function initialize() {
addcloud(); //为页面添加遮罩
document.onreadystatechange = subSomething; //监听加载状态改变
}
function addcloud() {
var bodyWidth = document.documentElement.clientWidth;
var bodyHeight = Math.max(document.documentElement.clientHeight, document.body.scrollHeight);
var bgObj = document.createElement("div" );
bgObj.setAttribute( 'id', 'bgDiv' );
bgObj.style.position = "absolute";
bgObj.style.top = "0";
bgObj.style.background = "#000000";
bgObj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75" ;
bgObj.style.opacity = "0.5";
bgObj.style.left = "0";
bgObj.style.width = bodyWidth + "px";
bgObj.style.height = bodyHeight + "px";
bgObj.style.zIndex = "10000"; //设置它的zindex属性,让这个div在z轴最大,用户点击页面任何东西都不会有反应|
document.body.appendChild(bgObj); //添加遮罩
var loadingObj = document.createElement("div");
loadingObj.setAttribute( 'id', 'loadingDiv' );
loadingObj.style.position = "absolute";
loadingObj.style.top = bodyHeight / 2 - 32 + "px";
loadingObj.style.left = bodyWidth / 2 + "px";
loadingObj.style.background = "url(../img/loading.gif)" ;
loadingObj.style.width = "32px";
loadingObj.style.height = "32px";
loadingObj.style.zIndex = "10000";
document.body.appendChild(loadingObj); //添加loading动画-
}
function removecloud() {
$( "#loadingDiv").remove();
$( "#bgDiv").remove();
}
function subSomething() {
if (document.readyState == "complete" ) //当页面加载完毕移除页面遮罩,移除loading动画-
{
removecloud();
}
}

您可能感兴趣的文章:

  • js实现动画特效的文字链接鼠标悬停提示的方法
  • js+css实现文字散开重组动画特效代码分享
  • 利用JS实现文字的聚合动画效果
  • JS动画效果代码3
  • 用js实现的模拟jquery的animate自定义动画(2.5K)
  • JS实现超炫网页烟花动画效果的方法
  • javascript制作loading动画效果 loading效果
  • js动画(animate)简单引擎代码示例
  • javascript与css3动画结合使用小结
  • js实现类似jquery里animate动画效果的方法
  • JS实现自定义状态栏动画文字效果示例

本文由今晚买四不像发布于今晚买四不像计算,转载请注明出处:JS判断页面加载状态以及添加遮罩和缓冲动画的代

关键词:

上一篇:支持中文拼音排序实现代码
下一篇:没有了