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代码放入<head>最后即可；
其中loading效果的样式可以根据自己的风格修改，loading.gif这个图片需要自己找
 
这个用JQ也可以实现。

JS实现页面加载完毕之前loading提示效果的更多相关文章

  1. js实现的页面加载完毕之前loading提示效果

    页面加载readyState的五种状态 原文如下: 0: (Uninitialized) the send( ) method has not yet been invoked. 1: (Loadin ...

  2. JS判断页面加载完毕

    //JS判断页面加载完毕,再隐藏加载效果层,一个简单的JS加载效果. document.onreadystatechange = function () { if (document.readySta ...

  3. js判断页面加载完毕方法

    判断页面加载完成这个方法是很常见的,下面有三个常用的方法,各有利弊. 一.纯js方法 // (1).页面所有内容加载完成执行 window.onload = function(){ } // (2). ...

  4. 一个等待页面加载完毕的loading动画

    1 html 部分 <!DOCTYPE html><html><head><meta http-equiv="Content-Type" ...

  5. jq常用事件（on,blur,focus,change）,js/jq等待图片(页面)加载完毕事件,js读取文件

    jq常用事件(on,blur,focus,change) // 方法一(推荐) $('.box').on( "click",function() {} ) $('.box').on ...

  6. 页面加载完毕后调用js方法进行布局操控 已实验

    页面加载完毕后调用js方法进行布局操控 已实验 $(function(){ var check1 = $("[id$=SMS]").is(':checked'); var bl=$ ...

  7. 页面加载完毕执行多个JS函数

    通常我们需要在打开页面时加载脚本,这些脚本必须在页面加载完毕后才可以执行,因为这时候DOM才完整,可以利用window.onload确保这一点,如:window.onload=firstFunctio ...

  8. jQuery页面加载完毕事件及jQuery与JavaScript的比较

    1.jQuery概述 jQuery是一个JavaScript库,它集成了JavaScript.DOM.CSS和Ajax,简化了JavaScript编程,提倡write less, do more. 2 ...

  9. JS在页面加载之后运行

    通用的页面加载后再运行JS有两种方式:1.在DOM加载完毕后,页面全部内容(如图片等)完全加载完毕前运行JS.   2.在页面全部内容加载完成(包括引用文件,图片等)之后再加载JS 1.在DOM加载后 ...

随机推荐

  1. linux下用用iptables做端口映射的shell

    情形一:跨网络.跨主机的映射Full-Nat 我们想到达主机B的80端口,但是由于网络限制可能无法直接完成.但是我们可以到达主机A的8080端口,而主机A可以直接到达B的80端口.这时候可以使用ipt ...

  2. Win10 + Nginx 1.10 + PHP 7 + Redis 配置方法

    软件包版本 软件 版本 - 链接 - Nginx nginx-x32-1.10.2.zip 下载 PHP php-7.0.12-nts-Win32-VC14-x64 下载 Redis php_redi ...

  3. sprintf、fprintf和printf这三个函数

    都是把格式好的字符串输出,只是输出的目标不一样:1 printf,是把格式字符串输出到标准输出(一般是屏幕,可以重定向).2 sprintf,是把格式字符串输出到指定字符串中,所以参数比printf多 ...

  4. BASH比较大小

  5. android中的位置服务（LBS）

    自己的位置:LocationManager 基本用法:创建实例:LocationManager locationManager =  (LocationManager)getSystemService ...

  6. ubuntu安装（owncloud-docker安装）

    1.源下载地址:http://mirrors.aliyun.com/ubuntu-releases/ ubuntu-16.04-server-amd64.iso 2.在虚拟机上安装完后 (1)查看IP ...

  7. ElasticSearch5+logstash的logstash-input-jdbc实现mysql数据同步

    在实现的路上遇到了各种坑,再次验证官方文档只能产考不能全信! ElasticSearch安装就不说了上一篇有说! 安装logstash 官方:https://www.elastic.co/guide/ ...

  8. BLE教程 - 官方tutorial翻译

    关键术语和概念 1. Generic Attribute Profile(GATT)GATT配置文件是一个通用规范,用于在BLE链路上发送和接收被称为"属性"的数据块.目前所有的B ...

  9. yii2 renderPartial

    在 views/news/_copyright.php 中插入以下代码: <div> This is text about copyright data for news items &l ...

  10. JAVA 1.2（原生数据类型 Primitive Data Type）

    1. Java的数据类型分为2类 >> 原生数据类型(primitive data type) >> 引用数据类型(reference data type) 3. 常量和变量 ...