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直接编辑当前cookie的脚本
Sep 14 Javascript
jquery获得下拉框值的代码
Aug 13 Javascript
计算世界完全对称日的js代码,粗糙版
Nov 04 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
Dec 31 Javascript
js检测判断日期大于多少天的方法
May 04 Javascript
AngularJS实现按钮提示与点击变色效果
Sep 07 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
Sep 28 Javascript
基于node下的http小爬虫的示例代码
Jan 11 Javascript
vue自定义指令directive实例详解
Jan 17 Javascript
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
Node.js设置定时任务之node-schedule模块的使用详解
Apr 28 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
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
PHP截取中文字符串的问题
2006/07/12 PHP
php设计模式 Chain Of Responsibility (职责链模式)
2011/06/26 PHP
php 无法加载mysql的module的时候的配置的解决方案引发的思考
2012/01/27 PHP
基于在生产环境中使用php性能测试工具xhprof的详解
2013/06/03 PHP
php中JSON的使用与转换
2015/01/14 PHP
PHP Yii框架之表单验证规则大全
2015/11/16 PHP
使用Yii2实现主从数据库设置
2016/11/20 PHP
PHP+MySQL高并发加锁事务处理问题解决方法
2018/04/30 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
jquery 选择器部分整理
2009/10/28 Javascript
jQuery操作checkbox选择(list/table)
2013/04/07 Javascript
jQuery制作简洁的多级联动Select下拉框
2014/12/23 Javascript
javascript判断变量是否有值的方法
2015/04/20 Javascript
$.extend 的一个小问题
2015/06/18 Javascript
详解JavaScript基于面向对象之创建对象(1)
2015/12/10 Javascript
JavaScript数组方法总结分析
2016/05/06 Javascript
jquery实现点击页面回到顶部
2016/11/23 Javascript
Javascript之面向对象--封装
2016/12/02 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
2017/10/28 jQuery
javascript递归函数定义和用法示例分析
2020/07/22 Javascript
vue+高德地图实现地图搜索及点击定位操作
2020/09/09 Javascript
[01:34]2014DOTA2展望TI 剑指西雅图VG战队专访
2014/06/30 DOTA
Python中的pprint折腾记
2015/01/21 Python
python正则分析nginx的访问日志
2017/01/17 Python
Django 接收Post请求数据,并保存到数据库的实现方法
2019/07/12 Python
django框架forms组件用法实例详解
2019/12/10 Python
python中random模块详解
2021/03/01 Python
英国内衣连锁店:Boux Avenue
2018/01/24 全球购物
马来西亚在线购物:POPLOOK.com
2019/12/09 全球购物
挂牌仪式主持词
2014/03/20 职场文书
义和团口号
2014/06/17 职场文书
企业年检委托书范本
2014/10/14 职场文书
党的群众路线教育实践活动个人批评与自我批评
2014/10/16 职场文书
2014七年级班主任工作总结
2014/12/05 职场文书
招商银行收入证明
2015/06/17 职场文书
高考百日冲刺决心书
2015/09/23 职场文书