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 学习笔记(七)字符串的连接
Dec 31 Javascript
原生js实现shift/ctrl/alt按键的获取
Apr 08 Javascript
Javascript实现视频轮播在pc端与移动端均可
Sep 29 Javascript
超棒的响应式布局jQuery插件Freetile.js
Nov 17 Javascript
node.js中的buffer.toString方法使用说明
Dec 14 Javascript
JavaScript中的函数声明和函数表达式区别浅析
Mar 27 Javascript
JS深度拷贝Object Array实例分析
Mar 31 Javascript
AngularJS入门教程之ng-checked 指令详解
Aug 01 Javascript
angularJS 指令封装回到顶部示例详解
Jan 22 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
Jun 21 Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
Jul 11 Javascript
websocket4.0+typescript 实现热更新的方法
Aug 14 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/05/07 PHP
比较简单实用的PHP无限分类源码分享(思路不错)
2011/10/13 PHP
PHP中spl_autoload_register函数的用法总结
2013/11/07 PHP
PHP验证信用卡卡号是否正确函数
2015/05/27 PHP
Yii中表单用法实例详解
2016/01/05 PHP
PHP操作路由器实现方法示例
2019/04/27 PHP
javascript 词法作用域和闭包分析说明
2010/08/12 Javascript
Jquery实现自定义窗口随意的拖拽
2014/03/12 Javascript
用javascript关闭本窗口技巧小结
2014/09/05 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
js中数组插入、删除元素操作的方法
2017/02/15 Javascript
如何从零开始手写Koa2框架
2019/03/22 Javascript
Nodejs实现用户注册功能
2019/04/14 NodeJs
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
教大家玩转Python字符串处理的七种技巧
2017/03/31 Python
浅谈Tensorflow模型的保存与恢复加载
2018/04/26 Python
Flask模拟实现CSRF攻击的方法
2018/07/24 Python
python同时遍历数组的索引和值的实例
2018/11/15 Python
python实现dijkstra最短路由算法
2019/01/17 Python
详解Python数据分析--Pandas知识点
2019/03/23 Python
python程序控制NAO机器人行走
2019/04/29 Python
Python opencv实现人眼/人脸识别以及实时打码处理
2019/04/29 Python
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
python shutil文件操作工具使用实例分析
2019/12/25 Python
python 输出列表元素实例(以空格/逗号为分隔符)
2019/12/25 Python
PyTorch加载预训练模型实例(pretrained)
2020/01/17 Python
使用keras和tensorflow保存为可部署的pb格式
2020/05/25 Python
python中使用asyncio实现异步IO实例分析
2021/02/26 Python
自荐信的基本格式
2014/02/22 职场文书
计生专干事迹
2014/05/28 职场文书
医院标语大全
2014/06/23 职场文书
优秀团员事迹材料1000字
2014/08/20 职场文书
2014年优秀党员材料
2014/12/18 职场文书
php 原生分页
2021/04/01 PHP
Oracle 临时表空间SQL语句的实现
2021/09/25 Oracle
Oracle安装TNS_ADMIN环境变量设置参考
2021/11/01 Oracle