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加载后 ...
随机推荐
- ReportService未指定 OverwriteDataSources
报表服务器部署好之后,查看报表就显示ConnectionString 属性尚未初始化. 然后重启部署并查看部署时控制台的输出信息,发现之前的部署成功消息是假象,实际上部署的时候有一个警告: 不能将数据 ...
- PSR-1：基本的代码风格
PHP标签 必须把PHP代码放在<?php ?>或<?= ?>标签中.不得使用其他PHP标签句法. 编码 所有PHP文件都必须使用UTF-8字符集编码,而且不能有字节顺序标记( ...
- html5移动端知识点总结
第一章,控制html字体大小 1.1使用媒体查询,不同分辨率设置不同的html的font-size @(min-width:320px){ html{font-size:10px;} } @(mi ...
- JSON方式提交文档时SOLR报：AtomicUpdateDocumentMerger Unknown operation for the an atomic update, operation ignored
文档是数组转成的json 原数组: array( 0 =>3, 1 =>3, 2 =>4, 3 =>5, 4 =>5, 5 =>6) 用array_unique去掉 ...
- 命令行用sublime打开当前目录
执行 ln -s "/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl" subl 就可以在命令行用 ...
- 输入事件驱动---evdev_handler的大致实现流程（修整版）
一.input输入子系统框架 下 图是input输入子系统框架,输入子系统由输入子系统核心层(input core),驱动层和事件处理层(Event Handler)三部分组成.一个输入事件,比如滑动 ...
- JPA，EclipseLink 缓存机制学习(一) 树节点搜索问题引发的思考
最近在项目在使用JPA+EclipseLink 的方式进行开发,其中EclipseLink使用版本为2.5.1.遇到一些缓存方面使用不当造成的问题,从本篇开始逐步学习EclipseLink的缓存机制. ...
- python获取时间
获取当前时间,和当前UTC时间 #!/usr/bin/env python #_*_ encoding:utf-8_*_ import datetime import time utctime = d ...
- weex 小结 --官方扩展组件
<wxc-tabbar> 页面底部的 tab 标签,通过点击在不同页面之间切换 属性: selected-index {number}:设置默认选中的 tab 索引,默认值为 0(第一个 ...
- 移动APP的开发迭代离不开测试，你搞清楚其中的关键点了吗？
App测试的一个要求是一个beta测试环境.为此,操作系统制造商要么提供他们自己的测试环境,比如:Testflight (iOS),要么可以使用任一商用工具,如:HockeyApp (Android) ...