JS实现页面加载完毕之前loading提示效果
1.获取浏览器页面可见高度和宽度
var _PageHeight = document.documentElement.clientHeight,
_PageWidth = document.documentElement.clientWidth;
2.计算loading框距离顶部和左部的距离（loading框的宽度为215px，高度为61px）
var _LoadingTop = _PageHeight > 61 ? (_PageHeight - 61) / 2 : 0,
_LoadingLeft = _PageWidth > 215 ? (_PageWidth - 215) / 2 : 0;
3.在页面未加载完毕之前显示的loading Html自定义内容
var _LoadingHtml = '<div id="loadingDiv" style="position:absolute;left:0;width:100%;height:' + _PageHeight + 'px;top:0;background:#f3f8ff;opacity:0.8;filter:alpha(opacity=80);z-index:10000;"><div style="position: absolute; cursor1: wait; left: ' + _LoadingLeft + 'px; top:' + _LoadingTop + 'px; width: auto; height: 57px; line-height: 57px; padding-left: 50px; padding-right: 5px; background: #fff url(/Content/loading.gif) no-repeat scroll 5px 10px; border: 2px solid #95B8E7; color: #696969; font-family:\'Microsoft YaHei\';">页面加载中，请等待...</div></div>';
4.呈现loading效果
document.write(_LoadingHtml);
//window.onload = function () {
// var loadingMask = document.getElementById('loadingDiv');
// loadingMask.parentNode.removeChild(loadingMask);
//};
5.监听加载状态改变（这一步是防止LOADING出错）
document.onreadystatechange = completeLoading;
//加载状态为complete时移除loading效果
function completeLoading() {
if (document.readyState == "complete") {
var loadingMask = document.getElementById('loadingDiv');
loadingMask.parentNode.removeChild(loadingMask);
}
}
JS实现页面加载完毕之前loading提示效果的更多相关文章
- js实现的页面加载完毕之前loading提示效果
页面加载readyState的五种状态 原文如下: 0: (Uninitialized) the send( ) method has not yet been invoked. 1: (Loadin ...
- JS判断页面加载完毕
//JS判断页面加载完毕,再隐藏加载效果层,一个简单的JS加载效果. document.onreadystatechange = function () { if (document.readySta ...
- js判断页面加载完毕方法
判断页面加载完成这个方法是很常见的,下面有三个常用的方法,各有利弊. 一.纯js方法 // (1).页面所有内容加载完成执行 window.onload = function(){ } // (2). ...
- 一个等待页面加载完毕的loading动画
1 html 部分 <!DOCTYPE html><html><head><meta http-equiv="Content-Type" ...
- jq常用事件（on,blur,focus,change）,js/jq等待图片(页面)加载完毕事件,js读取文件
jq常用事件(on,blur,focus,change) // 方法一(推荐) $('.box').on( "click",function() {} ) $('.box').on ...
- 页面加载完毕后调用js方法进行布局操控 已实验
页面加载完毕后调用js方法进行布局操控 已实验 $(function(){ var check1 = $("[id$=SMS]").is(':checked'); var bl=$ ...
- 页面加载完毕执行多个JS函数
通常我们需要在打开页面时加载脚本,这些脚本必须在页面加载完毕后才可以执行,因为这时候DOM才完整,可以利用window.onload确保这一点,如:window.onload=firstFunctio ...
- jQuery页面加载完毕事件及jQuery与JavaScript的比较
1.jQuery概述 jQuery是一个JavaScript库,它集成了JavaScript.DOM.CSS和Ajax,简化了JavaScript编程,提倡write less, do more. 2 ...
- JS在页面加载之后运行
通用的页面加载后再运行JS有两种方式:1.在DOM加载完毕后,页面全部内容(如图片等)完全加载完毕前运行JS. 2.在页面全部内容加载完成(包括引用文件,图片等)之后再加载JS 1.在DOM加载后 ...
随机推荐
- 复旦大学2015--2016学年第一学期高等代数I期末考试情况分析
一.期末考试成绩班级前几名 胡晓波(93).宋沛颖(92).张舒帆(91).姚人天(90).曾奕博(90).杨彦婷(90).白睿(88).唐指朝(87).谢灵尧(87).蔡雪(87) 二.总成绩计算方 ...
- python 初级1
List:Python内置的一种数据类型是列表:list.list是一种有序的集合,可以随时添加和删除其中的元素. 构造list非常简单,按照上面的代码,直接用 [ ] 把list的所有元素都括起来, ...
- AIDMA VS AISAS vs ISMAS 营销法则
AIDMA法则与传统媒体时代 引起注意——产生兴趣——培养欲望——形成记忆——购买行动 注:AIDMA,传统消费者行为学理论模型,即:Attention(引起注意),Interest (引起兴趣),D ...
- 话说C++中的左值、纯右值、将亡值
写在前面 C++中有“左值”.“右值”的概念,C++11以后,又有了“左值”.“纯右值”.“将亡值”的概念.关于这些概念,许多资料上都有介绍,本文在拾人牙慧的基础上又加入了一些自己的一些理解,同时提出 ...
- ACM HDU 2041--超级楼梯题解
超级楼梯 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submis ...
- 关于面试别问及Spring如何回答思路总结！
首先要知道 Spring两大核心IOC和AOP(Java轻量级业务层框架Spring两大核心IOC和AOP原理) IOC: 1.从Java最基本的创建对象开始 如Interface Driven De ...
- pip和easy_install更换使用国内源
因为论文原因,需要使用python安装一些自然语言库,但是使用pip或easy_install安装包时,总是超时(中国特色搞得事:-D),没有办法,上网查资料解决问题~~,在网上找到的方法都是说更换国 ...
- Linux C相关基础
系统求助 man 函数名 man 2 函数名 - 表示函数是系统调用函数 man 3 函数名 - 表示函数是C的库函数 eg:man fread man 2 w ...
- c# 邮件发送功能
//统一由一个邮箱发送录用通知 string strfrom = "";//发件人邮箱地址 string strpow = "";//邮箱密码 string s ...
- web开发字符乱码问题
java动态网页后台乱码问题总结 乱码可能出现的几块地方: 首先是浏览器和html之间采用的编码不一致 解决办法: 修改浏览器的编码格式 修改html页面的编码格式: <meta http-eq ...