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 rc2)使用指南(1)
Jan 10 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
Apr 26 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
Nov 29 Javascript
thinkphp中常用的系统常量和系统变量
Mar 05 Javascript
快速掌握Node.js环境的安装与运行方法
Feb 16 Javascript
Vue.js每天必学之组件与组件间的通信
Sep 08 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
Dec 26 Javascript
AngularJS 最常用的八种功能(基础知识)
Jun 26 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
Sep 26 Javascript
layui 富文本赋值,取值,取纯文本值的实例
Sep 18 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
Jan 04 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
把从SQL中取出的数据转化成XMl格式
2006/10/09 PHP
redis 队列操作的例子(php)
2012/04/12 PHP
PHP删除指定目录中的所有目录及文件的方法
2015/02/26 PHP
php实现姓名根据首字母排序的类与方法(实例代码)
2018/05/16 PHP
php redis setnx分布式锁简单原理解析
2020/10/23 PHP
从父页面读取和操作iframe中内容方法
2009/07/25 Javascript
关于javascript 回调函数中变量作用域的讨论
2009/09/11 Javascript
离开页面时检测表单元素是否被修改,提示保存的js代码
2010/08/25 Javascript
使用Firebug对js进行断点调试的图文方法
2011/04/02 Javascript
JQuery的ready函数与JS的onload的区别详解
2013/11/21 Javascript
javascript回车完美实现tab切换功能
2014/03/13 Javascript
jquery.cookie.js使用指南
2015/01/05 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
2015/12/07 Javascript
微信小程序 form组件详解
2016/10/25 Javascript
微信小程序 两种为对象属性赋值的方式详解
2017/02/23 Javascript
Node.js 异步异常的处理与domain模块解析
2017/05/10 Javascript
基于jQuery的左滑出现删除按钮的示例
2017/08/29 jQuery
vue返回上一页面时回到原先滚动的位置的方法
2018/12/20 Javascript
JavaScript事件循环及宏任务微任务原理解析
2020/09/02 Javascript
Python实现基于二叉树存储结构的堆排序算法示例
2017/12/08 Python
Python数据分析之获取双色球历史信息的方法示例
2018/02/03 Python
Numpy数组转置的两种实现方法
2018/04/17 Python
centos6.8安装python3.7无法import _ssl的解决方法
2018/09/17 Python
Python自动抢红包教程详解
2019/06/11 Python
python爬虫爬取图片的简单代码
2021/01/18 Python
python反扒机制的5种解决方法
2021/02/06 Python
英国最大的独立摄影零售商:Park Cameras
2019/11/27 全球购物
static关键字的用法
2013/10/07 面试题
应届生求职信
2014/05/31 职场文书
运动会加油口号
2014/06/07 职场文书
小学学习雷锋活动总结
2014/07/03 职场文书
法人代表证明书
2014/09/18 职场文书
运动会开幕式致辞
2015/07/29 职场文书
比较几种Redis集群方案
2021/06/21 Redis
jackson json序列化实现首字母大写,第二个字母需小写
2021/06/29 Java/Android
一条慢SQL语句引发的改造之路
2022/03/16 MySQL