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 相关文章推荐
prototype 1.5相关知识及他人笔记
Dec 16 Javascript
Javascript 网页水印(非图片水印)实现代码
Mar 01 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
Aug 06 Javascript
用于deeplink的js方法(判断手机是否安装app)
Apr 02 Javascript
jquery实现的下拉和收缩效果示例
Aug 21 Javascript
jQuery中复合属性选择器用法实例
Dec 31 Javascript
jQuery中:button选择器用法实例
Jan 04 Javascript
在JavaScript应用中实现延迟加载的方法
Jun 25 Javascript
JS实现超简单的仿QQ折叠菜单效果
Sep 21 Javascript
JS创建事件的三种方法(实例代码)
May 12 Javascript
jQuery前端开发35个小技巧
May 24 Javascript
express文件上传中间件Multer详解
Oct 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代码
2010/08/08 PHP
php中字符查找函数strpos、strrchr与strpbrk用法
2014/11/18 PHP
PHP连接数据库实现注册页面的增删改查操作
2016/03/27 PHP
php多进程中的阻塞与非阻塞操作实例分析
2020/03/04 PHP
增强的 JavaScript 的 trim 函数的代码
2007/08/13 Javascript
javascript中this做事件参数相关问题解答
2013/03/17 Javascript
屏蔽IE弹出"您查看的网页正在试图关闭窗口,是否关闭此窗口"的方法
2013/12/31 Javascript
原生js实现数字字母混合验证码的简单实例
2015/12/10 Javascript
JS Array创建及concat()split()slice()的使用方法
2016/06/03 Javascript
AngularJs Managing Service Dependencies详解
2016/09/02 Javascript
Vue方法与事件处理器详解
2016/12/01 Javascript
JQuery.validationEngine表单验证插件(推荐)
2016/12/10 Javascript
Vue 过渡(动画)transition组件案例详解
2017/01/22 Javascript
js实现简单的二级联动效果
2017/03/09 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
2017/06/28 Javascript
浅谈ES6 模板字符串的具体使用方法
2017/11/07 Javascript
简单实现jquery隔行变色
2017/11/09 jQuery
Vue.directive 自定义指令的问题小结
2018/03/04 Javascript
详解在vue-test-utils中mock全局对象
2018/11/07 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
2020/03/16 Javascript
Vue 同步异步存值取值实现案例
2020/08/05 Javascript
[02:38]2018DOTA2亚洲邀请赛赛前采访-VGJ.T
2018/04/03 DOTA
[56:12]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第一场 6.3
2018/06/04 DOTA
Python切换pip安装源的方法详解
2016/11/18 Python
Python实现的用户登录系统功能示例
2018/02/05 Python
对python中数据集划分函数StratifiedShuffleSplit的使用详解
2018/12/11 Python
Python设计模式之状态模式原理与用法详解
2019/01/15 Python
Python变量作用域LEGB用法解析
2020/02/04 Python
python实现超级马里奥
2020/03/18 Python
Python中的xlrd模块使用原理解析
2020/05/21 Python
CSS3 input框的实现代码类似Google登录的动画效果
2020/08/04 HTML / CSS
汽车电子与维修专业大学生求职信
2013/09/28 职场文书
中专自荐信
2013/10/13 职场文书
临时工聘用合同协议书
2014/10/29 职场文书
高三数学复习备考教学反思
2016/02/18 职场文书
一个成功的互联网创业项目,必须满足这些要求
2019/08/23 职场文书