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 相关文章推荐
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
Aug 05 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
Oct 17 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
May 19 Javascript
JQuery插入DOM节点的方法
Jun 11 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
Jul 28 Javascript
jquery插件uploadify多图上传功能实现代码
Aug 12 Javascript
web 前端常用组件之Layer弹出层组件
Sep 22 Javascript
Node.js爬虫如何获取天气和每日问候详解
Aug 26 Javascript
vue+element表格导出为Excel文件
Sep 26 Javascript
vue实现鼠标移过出现下拉二级菜单功能
Dec 12 Javascript
区分vue-router的hash和history模式
Oct 03 Javascript
JS前端可扩展的低代码UI框架Sunmao使用详解
Jul 23 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
打造计数器DIY三步曲(中)
2006/10/09 PHP
php设计模式 Visitor 访问者模式
2011/06/28 PHP
利用PHP命令行模式采集股票趋势信息
2016/08/09 PHP
PHP重定向与伪静态区别
2017/02/19 PHP
浅谈php的TS和NTS的区别
2019/03/13 PHP
父元素与子iframe相互获取变量和元素对象的具体实现
2013/10/15 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
2013/12/29 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
2014/02/28 Javascript
jquery中each方法示例和常用选择器
2014/07/08 Javascript
用循环或if语句从json中取数据示例
2014/08/18 Javascript
node.js中的fs.truncateSync方法使用说明
2014/12/15 Javascript
使用js画图之圆、弧、扇形
2015/01/12 Javascript
纯js实现瀑布流布局及ajax动态新增数据
2016/04/07 Javascript
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
node.js版本管理工具n无效的原理和解决方法
2016/11/24 Javascript
js cookie实现记住密码功能
2017/01/17 Javascript
javascript设计模式之模块模式学习笔记
2017/02/15 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
2017/02/22 Javascript
利用nodeJs anywhere搭建本地服务器环境的方法
2018/05/12 NodeJs
Node.js进阶之核心模块https入门
2018/05/23 Javascript
Javascript中绑定click事件的四种方式介绍
2018/10/26 Javascript
ES6中字符串的使用方法扩展
2019/06/04 Javascript
angular中的post请求处理示例详解
2020/06/30 Javascript
使用pytorch进行图像的顺序读取方法
2018/07/27 Python
代码实例讲解python3的编码问题
2019/07/08 Python
python实现excel公式格式化的示例代码
2020/12/23 Python
h5移动端调用支付宝、微信支付的实现
2020/06/08 HTML / CSS
加拿大高尔夫超市:Golf Town
2018/01/12 全球购物
ORACLE第二个十问
2013/12/14 面试题
医学生实习自荐信
2013/10/01 职场文书
教师新年寄语
2014/04/03 职场文书
计算机售后服务承诺书
2014/05/30 职场文书
模具专业求职信
2014/06/26 职场文书
2016年“节能宣传周”活动总结
2016/04/05 职场文书
大学生创业计划书常用模板
2019/08/07 职场文书
深入理解CSS 中 transform matrix矩阵变换问题
2021/08/30 HTML / CSS