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


Posted in Javascript onOctober 11, 2012
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(); 
} 
}
Javascript 相关文章推荐
jquery 1.3.2 IE8中的一点点的小问题解决方法
Jul 10 Javascript
script标签的 charset 属性使用说明
Dec 04 Javascript
js中关于一个分号的崩溃示例
Nov 11 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
Nov 13 Javascript
JS实现简单的图书馆享元模式实例
Jun 30 Javascript
AngularJS的一些基本样式初窥
Jul 27 Javascript
js实现上传图片预览方法
Oct 25 Javascript
详解js的事件代理(委托)
Dec 22 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
May 02 Javascript
vue2.0全局组件之pdf详解
Jun 26 Javascript
vue深入解析之render function code详解
Jul 18 Javascript
如何用原生js写一个弹窗消息提醒插件
May 24 Javascript
js函数的延迟加载实现代码
Oct 11 #Javascript
javascript中方便增删改cookie的一个类
Oct 11 #Javascript
js事件(Event)知识整理
Oct 11 #Javascript
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
Oct 11 #Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
Oct 11 #Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
Oct 11 #Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
Oct 11 #Javascript
You might like
JavaScript判断一个URL链接是否有效的实现方法
2011/10/08 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
2012/03/13 Javascript
Jquery 复选框取值兼容FF和IE8(测试有效)
2013/10/29 Javascript
JS获取当前网址、主机地址项目根路径
2013/11/19 Javascript
分享一个常用的javascript静态类
2014/12/31 Javascript
Javascript中的Callback方法浅析
2015/03/15 Javascript
纯CSS3代码实现滑动开关效果
2015/08/19 Javascript
深入分析jsonp协议原理
2015/09/26 Javascript
JS集成fckeditor及判断内容是否为空的方法
2016/05/27 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
2016/06/08 Javascript
JS解析url查询参数的简单代码
2017/08/06 Javascript
10个最优秀的Node.js MVC框架
2017/08/24 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
2018/06/25 Javascript
js+canvas实现验证码功能
2020/09/21 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
2019/08/26 Javascript
Vue项目开发常见问题和解决方案总结
2020/09/11 Javascript
OpenLayers3实现鼠标移动显示坐标
2020/09/25 Javascript
Python 的 with 语句详解
2014/06/13 Python
Python中文编码那些事
2014/06/25 Python
Python3.5内置模块之shelve模块、xml模块、configparser模块、hashlib、hmac模块用法分析
2019/04/27 Python
python画图--输出指定像素点的颜色值方法
2019/07/03 Python
jupyter 使用Pillow包显示图像时inline显示方式
2020/04/24 Python
哈工大自然语言处理工具箱之ltp在windows10下的安装使用教程
2020/05/07 Python
Python键鼠操作自动化库PyAutoGUI简介(小结)
2020/05/17 Python
Python 实现图片转字符画的示例(静态图片,gif皆可)
2020/11/05 Python
解决pycharm修改代码后第一次运行不生效的问题
2021/02/06 Python
亚洲领先的设计购物网站:Pinkoi
2020/11/26 全球购物
Java语言的优势
2015/01/10 面试题
浅谈react路由传参的几种方式
2021/03/23 Javascript
汽车专业人才自我鉴定范文
2013/12/29 职场文书
简历自我评价模版
2014/01/31 职场文书
护理专科自荐书范文
2014/02/18 职场文书
工伤事故赔偿协议书
2014/10/27 职场文书
体育教师个人工作总结
2015/02/09 职场文书
隐形的翅膀观后感
2015/06/10 职场文书
2015年治庸问责工作总结
2015/07/27 职场文书