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 操作XML入门
Dec 25 Javascript
Google AJAX 搜索 API实现代码
Nov 17 Javascript
jquery实现简单易懂的图片展示小例子
Nov 21 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
Jun 03 Javascript
jquery获得同源iframe内body下标签的值的方法
Sep 25 Javascript
去除html代码里面的script正则方法
May 19 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
Oct 30 Javascript
jQuery特殊符号转义的实现
Nov 30 Javascript
AngularJS2中一种button切换效果的实现方法(二)
Mar 27 Javascript
在HTML文档中嵌入JavaScript的四种方法
May 07 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
Sep 28 Javascript
JS实现简单打字测试
Jun 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
php设计模式 Facade(外观模式)
2011/06/26 PHP
php数组操作之键名比较与差集、交集赋值的方法
2014/11/10 PHP
控制打印时页眉角的代码
2007/02/08 Javascript
小议javascript 设计模式 推荐
2009/10/28 Javascript
ext中store.load跟store.reload的区别示例介绍
2014/06/17 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
2015/01/09 Javascript
JavaScript中toString()方法的使用详解
2015/06/05 Javascript
详解JavaScript ES6中的模板字符串
2015/07/28 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
2015/08/26 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
2016/09/08 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
2018/01/03 Javascript
详解搭建es6+devServer简单开发环境
2018/09/25 Javascript
新手入门js闭包学习过程解析
2019/10/08 Javascript
node.js中 redis 的安装和基本操作示例
2020/02/10 Javascript
python服务器与android客户端socket通信实例
2014/11/12 Python
Python利用前序和中序遍历结果重建二叉树的方法
2016/04/27 Python
python交互式图形编程实例(三)
2017/11/17 Python
Python模拟随机游走图形效果示例
2018/02/06 Python
Numpy array数据的增、删、改、查实例
2018/06/04 Python
python实现一组典型数据格式转换
2018/12/15 Python
对Python正则匹配IP、Url、Mail的方法详解
2018/12/25 Python
对Python发送带header的http请求方法详解
2019/01/02 Python
Python高级特性与几种函数的讲解
2019/03/08 Python
python中封包建立过程实例
2021/02/18 Python
Linux操作面试题
2012/05/16 面试题
生产内勤岗位职责
2013/12/07 职场文书
摄影助理岗位职责
2014/02/07 职场文书
医院党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
财务助理岗位职责范本
2014/10/09 职场文书
群众路线查摆问题及整改措施
2014/10/10 职场文书
2014年机关党建工作总结
2014/11/11 职场文书
毕业设计指导教师评语
2014/12/30 职场文书
面试感谢信范文
2015/01/22 职场文书
幼儿园大班开学寄语(2016秋季)
2015/12/03 职场文书
当你找不到方向的时候,不妨读读刘备的一生
2019/08/05 职场文书
Java如何实现通过键盘输入一个数组
2022/02/15 Java/Android