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加载后 ...
随机推荐
- 2017年1月2日 星期一 --出埃及记 Exodus 21:28
2017年1月2日 星期一 --出埃及记 Exodus 21:28 "If a bull gores a man or a woman to death, the bull must be ...
- CSS篇
一.盒子模型: 标准模式和混杂模式(IE).在标准模式下浏览器按照规范呈现页面:在混杂模式下,页面以一种比较宽松的向后兼容的方式显示.混杂模式通常模拟老式浏览器的行为以防止老站点无法工作. CSS盒子 ...
- VS2015 使用 Web Deploy 发布网站到 WindowsServer2008 R2服务器详解
使用原因:由于开发期间需要将开发出的网站随时提交到服务器以便公司高层随时访问所以要求将开发出的网站每天发布到服务器,频繁度比较高,因此不能再使用之前的方式(发布到本地后再拷贝文件到服务器),所以想到了 ...
- BLE编程中关键步骤
获取权限 <uses-permission android:name="android.permission.BLUETOOTH"/> <uses-permiss ...
- UAT SIT QAS DEV PET
UAT: User Acceptance Testing 用户验收测试SIT: System Integration Testing 系统集成测试PET: Performance Evaluation ...
- UVA Open Credit System Uva 11078
题目大意:给长度N的A1.....An 求(Ai-Aj)MAX 枚举n^2 其实动态维护最大值就好了 #include<iostream> #include<cstdio> u ...
- 不再为Apache进程淤积、耗尽内存而困扰((转))
本篇文章是为使用Apache+MySQL,并为Apache耗尽内存而困扰的系统管理员而写.如果您没有耐心读完本文,请参考以下步骤: 修改/etc/my.cnf,加上这样一行: log-slow-que ...
- Nginx基础知识之————RTMP模块专题（实践文档）
on_publish 语法:on_publish url上下文:rtmp, server, application描述:这个可以设置为一个API接口(GET方式接受所有参数),会给这个API接口返回8 ...
- redhat samba匿名登录服务器搭建
smb服务器只需要yum install samba 安装起,并修改配置文件就可以匿名使用了. smb配置文件,这里允许匿名登录.红色部分代表我共享出来文件夹参数code [root@localh ...
- JQuery_元素样式操作
元素样式操作包括了直接设置CSS 样式.增加CSS 类别.类别切换.删除类别这几种操作方法.而在整个jQuery 使用频率上来看,CSS 样式的操作也是极高的,所以需要重点掌握. 一.css()方法 ...