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 相关文章推荐
JS自调用匿名函数具体实现
Feb 11 Javascript
jquery Easyui快速开发总结
Aug 20 Javascript
JavaScript对象数组排序函数及六个用法
Dec 23 Javascript
jQuery获取checkbox选中的值
Jan 28 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
Dec 28 Javascript
Webpack实现按需打包Lodash的几种方法详解
May 08 Javascript
详解vue-cli 脚手架项目-package.json
Jul 04 Javascript
详解vue中使用express+fetch获取本地json文件
Oct 10 Javascript
JavaScript EventEmitter 背后的秘密 完整版
Mar 29 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
Sep 19 Javascript
JS自定义滚动条效果
Mar 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
一个程序下载的管理程序(二)
2006/10/09 PHP
php 定义404页面的实现代码
2012/11/19 PHP
Joomla数据库操作之JFactory::getDBO用法
2016/05/05 PHP
PHP后期静态绑定实例浅析
2018/12/21 PHP
php时间戳转换代码详解
2019/08/04 PHP
js 调用百度地图api并在地图上进行打点添加标注
2014/05/13 Javascript
jQuery打印指定区域Html页面并自动分页
2014/07/04 Javascript
javascript获取文档坐标和视口坐标
2015/05/26 Javascript
JS扩展类,克隆对象与混合类实例分析
2016/11/26 Javascript
web打印小结
2017/01/11 Javascript
jquery——九宫格大转盘抽奖实例
2017/01/16 Javascript
JavaScript模块模式实例详解
2017/10/25 Javascript
AngularJS实现图片上传和预览功能的方法分析
2017/11/08 Javascript
解决Mac node版本升级失败的问题
2018/05/16 Javascript
vue代码分割的实现(codesplit)
2018/11/13 Javascript
使用ThinkJs搭建微信中控服务的实现方法
2019/08/08 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
2019/11/01 Javascript
[45:59]完美世界DOTA2联赛PWL S2 FTD vs GXR 第二场 11.22
2020/11/24 DOTA
python通过apply使用元祖和列表调用函数实例
2015/05/26 Python
Python中函数的参数定义和可变参数用法实例分析
2015/06/04 Python
python引入导入自定义模块和外部文件的实例
2017/07/24 Python
python微信跳一跳系列之自动计算跳一跳距离
2018/02/26 Python
pandas的object对象转时间对象的方法
2018/04/11 Python
Python实现的各种常见分布算法示例
2018/12/13 Python
Django 实现图片上传和下载功能
2020/12/31 Python
css3高级选择器使用方法
2013/12/02 HTML / CSS
canvas学习笔记之绘制简单路径
2019/01/28 HTML / CSS
消防安全检查制度
2014/02/04 职场文书
阳光体育活动方案
2014/02/16 职场文书
财务总监管理职责范文
2014/03/09 职场文书
《歌唱二小放牛郎》教学反思
2014/04/19 职场文书
2014银行领导班子群众路线对照检查材料思想汇报
2014/09/17 职场文书
玩手机检讨书1000字
2014/10/20 职场文书
消防演习通知
2015/04/25 职场文书
2015财务年终工作总结范文
2015/05/22 职场文书
给学校的建议书400字
2015/09/14 职场文书