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 相关文章推荐
Javascript条件判断使用小技巧总结
Sep 08 Javascript
MooTools 1.2中的Drag.Move来实现拖放
Sep 15 Javascript
jQuery Flash/MP3/Video多媒体插件
Jan 18 Javascript
js的隐含参数(arguments,callee,caller)使用方法
Jan 28 Javascript
JavaScript兼容浏览器FF/IE技巧
Aug 14 Javascript
原生js实现键盘控制div移动且解决停顿问题
Dec 05 Javascript
原JS实现banner图的常用功能
Jun 12 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
Vue调试神器vue-devtools安装方法
Dec 12 Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
Jan 12 Javascript
vue cli2.0单页面title修改方法
Jun 07 Javascript
利用Electron简单撸一个Markdown编辑器的方法
Jun 10 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
一个显示天气预报的程序
2006/10/09 PHP
PHP取二进制文件头快速判断文件类型的实现代码
2013/08/05 PHP
PHP中mysqli_affected_rows作用行数返回值分析
2014/12/26 PHP
PHP中key和current,next的联合运用实例分析
2016/03/29 PHP
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
2012/10/11 Javascript
JavaScript 创建运动框架的实现代码
2013/05/08 Javascript
JS Loading功能的简单实现
2013/11/29 Javascript
jquery选择器之层级过滤选择器详解
2014/01/27 Javascript
在myeclipse中如何加入jquery代码提示功能
2014/06/03 Javascript
jQuery操作iframe中js函数的方法小结
2016/07/06 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
2017/03/03 Javascript
node-sass安装失败的原因与解决方法
2017/09/04 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
2018/08/10 Javascript
JavaScript代码调试方法实例小结
2019/01/05 Javascript
vue中组件通信的八种方式(值得收藏!)
2019/08/09 Javascript
jQuery实现可以扩展的日历
2020/12/01 jQuery
[40:31]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python的设计模式编程入门指南
2015/04/02 Python
python如何实现远程控制电脑(结合微信)
2015/12/21 Python
ubuntu系统下使用pm2设置nodejs开机自启动的方法
2018/05/12 NodeJs
使用Python来开发微信功能
2018/06/13 Python
python 顺时针打印矩阵的超简洁代码
2018/11/14 Python
pandas分区间,算频率的实例
2019/07/04 Python
美国最大的高尔夫发球时间预订网站:TeeOff.com
2018/03/28 全球购物
Stubhub英国:购买体育、演唱会和剧院门票
2018/06/10 全球购物
得到Class的三个过程是什么
2012/08/10 面试题
命名空间(namespace)和程序集(Assembly)有什么区别
2015/09/25 面试题
迟到检讨书1000字
2014/01/15 职场文书
入学生会自荐书范文
2014/02/05 职场文书
工商局局长个人对照检查材料思想汇报
2014/09/23 职场文书
营销计划书
2015/01/17 职场文书
介绍信的写法
2015/01/31 职场文书
中秋晚会致辞
2015/07/31 职场文书
MySQL数据库如何使用Shell进行连接
2022/04/12 MySQL
Spring Boot 的创建和运行示例代码详解
2022/07/23 Java/Android
CSS 鼠标选中文字后改变背景色的实现代码
2023/05/21 HTML / CSS