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 相关文章推荐
HTML Color Picker(js拾色器效果)
Aug 27 Javascript
中文输入法不触发onkeyup事件的解决办法
Jul 09 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
Mar 04 Javascript
js基于setTimeout与setInterval实现多线程
Jun 17 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
Aug 15 Javascript
浅谈javascript中的 “ && ” 和 “ || ”
Feb 02 Javascript
详解vuex 中的 state 在组件中如何监听
May 23 Javascript
移动端效果之Swiper详解
Oct 09 Javascript
微信小程序icon组件使用详解
Jan 31 Javascript
element-ui使用导航栏跳转路由的用法详解
Aug 22 Javascript
详解node和ES6的模块导出与导入
Feb 19 Javascript
Vue实现boradcast和dispatch的示例
Nov 13 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多用户计数器代码
2007/03/11 PHP
PHP字符串长度计算 - strlen()函数使用介绍
2013/10/15 PHP
PHP实现将科学计数法转换为原始数字字符串的方法
2014/12/16 PHP
为PHP5.4开启Zend OPCode缓存
2014/12/26 PHP
PHP的Yii框架中Model模型的学习教程
2016/03/29 PHP
yii2中的rules 自定义验证规则详解
2016/04/19 PHP
php处理静态页面:页面设置缓存时间实例
2017/06/22 PHP
javascript 嵌套的函数(作用域链)
2010/03/15 Javascript
JavaScript 用Node.js写Shell脚本[译]
2012/09/20 Javascript
JS实现从表格中动态删除指定行的方法
2015/03/31 Javascript
js确认框confirm()用法实例详解
2016/01/07 Javascript
JavaScript正则获取地址栏中参数的方法
2017/03/02 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
2017/03/13 Javascript
AngularJS折叠菜单实现方法示例
2017/05/18 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
2017/12/07 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
2018/02/23 Javascript
node.js基础知识小结
2018/02/26 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
2019/05/07 Javascript
微信小程序点击列表跳转到对应详情页过程解析
2019/09/26 Javascript
Python fileinput模块使用实例
2015/06/03 Python
Python实现找出数组中第2大数字的方法示例
2018/03/26 Python
Python简单定义与使用二叉树示例
2018/05/11 Python
Python使用pydub库对mp3与wav格式进行互转的方法
2019/01/10 Python
关于Python形参打包与解包小技巧分享
2019/08/24 Python
2014年圣诞节倒计时网页的制作过程
2014/12/05 HTML / CSS
Haggar官网:美国男装品牌
2020/02/16 全球购物
高中生家长会演讲稿
2014/01/14 职场文书
致共产党员倡议书
2014/04/16 职场文书
房产销售独家委托书范本
2014/10/01 职场文书
2015年教师自我评价范文
2015/03/04 职场文书
2015年教务主任工作总结
2015/07/22 职场文书
企业安全隐患排查治理制度
2015/08/05 职场文书
社区志愿服务活动感想
2015/08/07 职场文书
企业年会祝酒词
2015/08/11 职场文书
给校长的建议书作文400字
2015/09/14 职场文书
JS class语法糖的深入剖析
2022/07/07 Javascript