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查询DBpedia小应用实例学习
Mar 07 Javascript
js jq 单击和双击区分示例介绍
Nov 05 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
Oct 20 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
Mar 13 Javascript
JavaScript中日常收集常见的10种错误(推荐)
Jan 08 Javascript
微信小程序通过api接口将json数据展现到小程序示例
Jan 20 Javascript
原生javascript移动端滑动banner效果
Mar 10 Javascript
Angular+Node生成随机数的方法
Jun 16 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
Jul 12 Javascript
js使用html2canvas实现屏幕截取的示例代码
Aug 28 Javascript
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
JavaScript canvas实现雪花随机动态飘落
Feb 08 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
星际争霸秘籍
2020/03/04 星际争霸
zf框架db类的分页示例分享
2014/03/14 PHP
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
PHP微信开发之有道翻译
2016/06/23 PHP
php使用FFmpeg接口获取视频的播放时长、码率、缩略图以及创建时间
2016/11/07 PHP
通过JAVAScript实现页面自适应
2007/01/19 Javascript
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
2009/02/14 Javascript
JS将表单导出成EXCEL的实例代码
2013/11/11 Javascript
javascript中的self和this用法小结
2014/02/08 Javascript
js对图片base64编码字符串进行解码并输出图像示例
2014/03/17 Javascript
jquery实现通用的内容渐显Tab选项卡效果
2015/09/07 Javascript
分享两款带遮罩的jQuery弹出框
2015/12/30 Javascript
jquery实现tab键进行选择后enter键触发click行为
2017/03/29 jQuery
基于nodejs+express4.X实现文件下载的实例代码
2017/07/13 NodeJs
nodejs实现截取上传视频中一帧作为预览图片
2017/12/10 NodeJs
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
2019/07/26 Javascript
在Python的gevent框架下执行异步的Solr查询的教程
2015/04/16 Python
对Tensorflow中权值和feature map的可视化详解
2018/06/14 Python
python利用Tesseract识别验证码的方法示例
2019/01/21 Python
利用python、tensorflow、opencv、pyqt5实现人脸实时签到系统
2019/09/25 Python
结束运行python的方法
2020/06/16 Python
详解利用python识别图片中的条码(pyzbar)及条码图片矫正和增强
2020/11/17 Python
python中_del_还原数据的方法
2020/12/09 Python
Ubuntu20下的Django安装的方法步骤
2021/01/24 Python
Links of London官方网站:英国标志性的珠宝品牌
2017/04/09 全球购物
T3官网:头发造型工具
2019/12/26 全球购物
政治学求职信
2014/06/03 职场文书
财会专业毕业生自荐信
2014/07/09 职场文书
高中校园广播稿
2014/10/21 职场文书
教师年度考核个人总结
2015/02/12 职场文书
德能勤绩工作总结
2015/08/11 职场文书
springboot中一些比较常用的注解总结
2021/06/11 Java/Android
MySQL中varchar和char类型的区别
2021/11/17 MySQL
MySQL 开窗函数
2022/02/15 MySQL
人工智能深度学习OpenAI baselines的使用方法
2022/05/20 Python
Win11无法安装更新补丁KB3045316怎么办 附KB3045316补丁修复教程
2022/08/14 数码科技