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 跨域访问问题解决方法
Dec 02 Javascript
Whatever:hover 无需javascript让IE支持丰富伪类
Jun 29 Javascript
2010年最佳jQuery插件整理
Dec 06 Javascript
Grid得到选择行数据的方法总结
Jan 17 Javascript
使用Mootools动态添加Css样式表代码,兼容各浏览器
Dec 12 Javascript
基于jquery & json的省市区联动代码
Jun 26 Javascript
简单实现js选项卡切换效果
Feb 03 Javascript
浅谈window.onbeforeunload() 事件调用ajax
Jun 29 Javascript
vue.js初学入门教程(2)
Nov 07 Javascript
Websocket协议详解及简单实例代码
Dec 12 Javascript
jQuery基于Ajax方式提交表单功能示例
Feb 10 Javascript
深入理解React高阶组件
Sep 28 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上传文件的增强函数
2010/07/21 PHP
php统计文章排行示例
2014/03/04 PHP
ThinkPHP视图查询详解
2014/06/30 PHP
php无限极分类递归排序实现方法
2014/11/11 PHP
PHP滚动日志的代码实现
2015/06/10 PHP
PHP中使用GD库绘制折线图 折线统计图的绘制方法
2015/11/09 PHP
PHP+jquery+CSS制作头像登录窗(仿QQ登陆)
2016/10/20 PHP
PHP iconv()函数字符编码转换的问题讲解
2019/03/22 PHP
JSON.parse 解析字符串出错的解决方法
2010/07/08 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
2013/05/23 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
2014/01/14 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
2015/03/14 Javascript
JavaScript实现非常简单实用的下拉菜单效果
2015/08/27 Javascript
js友好的时间返回函数
2016/08/24 Javascript
js实现表单提交后不重新刷新当前页面
2016/11/30 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
2017/02/18 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
2017/06/21 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
2017/07/20 jQuery
[36:33]完美世界DOTA2联赛循环赛 Matador vs Forest 第一场 11.06
2020/11/06 DOTA
[49:58]完美世界DOTA2联赛PWL S3 Magma vs DLG 第一场 12.18
2020/12/19 DOTA
Python中的面向对象编程详解(下)
2015/04/13 Python
python 分离文件名和路径以及分离文件名和后缀的方法
2018/10/21 Python
pyside+pyqt实现鼠标右键菜单功能
2020/12/08 Python
结合CSS3的新特性来总结垂直居中的实现方法
2016/05/30 HTML / CSS
10分钟理解CSS3 FlexBox弹性布局
2018/12/20 HTML / CSS
HTML5 图片悬停放大的实现代码示例
2019/12/04 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
2020/04/26 HTML / CSS
萌新HTML5 入门指南(二)
2020/11/09 HTML / CSS
廉价航班、机票和酒店:JustFly
2018/02/07 全球购物
实现strstr功能,即在父串中寻找子串首次出现的位置
2016/08/05 面试题
领导干部培训感言
2014/01/23 职场文书
大学毕业感言100字
2014/02/03 职场文书
安全协议书范本
2014/04/21 职场文书
2014年设备管理工作总结
2014/11/26 职场文书
100句人生哲理语录集锦:强者征服今天,懒汉坐等明天
2019/10/18 职场文书
CSS 还能这样玩?奇思妙想渐变的艺术
2021/04/27 HTML / CSS