页面加载readyState的五种状态 
原文如下: 
0: (Uninitialized) the send( ) method has not yet been invoked. 
1: (Loading) the send( ) method has been invoked, request in progress. 
2: (Loaded) the send( ) method has completed, entire response received. 
3: (Interactive) the response is being parsed. 
4: (Completed) the response has been parsed, is ready for harvesting.

翻译成中文为: 
0 － （未初始化）还没有调用send()方法 
1 － （载入）已调用send()方法，正在发送请求 
2 － （载入完成）send()方法执行完成，已经接收到全部响应内容 
3 － （交互）正在解析响应内容 
4 － （完成）响应内容解析完成，可以在客户端调用了

1、JS代码

//获取浏览器页面可见高度和宽度

var _PageHeight = document.documentElement.clientHeight,

    _PageWidth = document.documentElement.clientWidth;

//计算loading框距离顶部和左部的距离（loading框的宽度为215px，高度为61px）

var _LoadingTop = _PageHeight > 61 ? (_PageHeight - 61) / 2 : 0,

    _LoadingLeft = _PageWidth > 215 ? (_PageWidth - 215) / 2 : 0;

//在页面未加载完毕之前显示的loading Html自定义内容

var _LoadingHtml = '<div id="loadingDiv" style="position:absolute;left:0;width:100%;height:' + _PageHeight + 'px;top:0;background:#f3f8ff;opacity:1;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(Image/loading.gif) no-repeat scroll 5px 10px; border: 2px solid #95B8E7; color: #696969; font-family:\'Microsoft YaHei\';">页面加载中，请等待...</div></div>';

//呈现loading效果

document.write(_LoadingHtml);

//window.onload = function () {

//    var loadingMask = document.getElementById('loadingDiv');

//    loadingMask.parentNode.removeChild(loadingMask);

//};

//监听加载状态改变

document.onreadystatechange = completeLoading;

//加载状态为complete时移除loading效果

function completeLoading() {

    if (document.readyState == "complete") {

        var loadingMask = document.getElementById('loadingDiv');

        loadingMask.parentNode.removeChild(loadingMask);

    }

}

2、效果

说明：

将此段js代码放入<head>最后即可；
其中loading效果的样式可以根据自己的风格修改，loading.gif这个图片需要自己找（网上很多的）。

参考：https://m.jb51.net/article/89675.htm

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

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

    1.获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.docu ...

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

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

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

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

  4. JS判断页面加载完毕

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

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

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

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

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

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

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

  8. 【转】JS判断SWF,JPG加载完毕、兼容（Activex,plugIn）所有浏览器

    JS判断SWF,JPG加载完毕.兼容(Activex,plugIn)所有浏览器 这里主要说下监听SWF的加载. 网上流传已久的监听方法,只能在IE(Activex插件下)下实现.在使用plugin的浏 ...

  9. js 判断iframe是否加载完毕

      js 判断iframe是否加载完毕 CreationTime--2018年9月13日15点30分 Author:Marydon 1.javascript实现 window.onload = fun ...

随机推荐

  1. spring-第四篇之让bean获取所在的spring容器

    1.如上一篇文章所述,有时候bean想发布一些容器事件,就需要先获取spring容器,然后将Event交由spring容器将事件发布出去. 为了让bean获取它所在的spring容器,可以让该bean ...

  2. 解决Ubuntu12.04下rpcbind: cannot open '/var/run/rpcbind/rpcbind.xdr' file for reading

    不知道怎么回事,实验室的电脑在同学搞过之后,每次启动都报错 rpcbind: cannot open '/run/rpcbind/rpcbind.xdr' file for reading, errn ...

  3. vue-devtools工具的安装

    vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率.接下来我们就介绍一下vue-devtools的安装 1.登录github,获取到vue- ...

  4. BUUCTF--新年快乐

    测试文件:https://buuoj.cn/files/bbf9f68a97fd551edec384914d4f3fbe/93c43c5c-3d4d-4d17-a9a1-4ffb65ebb2fb.zi ...

  5. 完善Hikari连接池扩展项目HikariApi（ORM）

    以前介绍类自定义的Hikari项目,定位于数据库连接池:后扩展了,根据文件名称,以数据库配置文件为基础,支持按照名称多数据操作. 在使用中,发现扩展了SQL语句参数化操作,在管理类中,以扩展方法存在. ...

  6. 只用ipv6 两台机器共享文件夹, 局域网连接路径，共享文件夹路径中ipv6地址如何表示

    1. 首先要确认你的DNS服务器支持IPv6,一般是指网络中的路由. 2. 如果网络中没有路由,则直接在hosts文件中添加对方的IPv6地址与名字. 3. 利用UNC路径,把冒号修改为连字符并附加. ...

  7. 02.Linux-CentOS系统NFS挂载时拒绝访问挂载问题

    问题: 在挂载nfs时报拒绝访问挂载:mount -t nfs 192.163.1.10:/home/opneuser/upload /home/openuser/upload/ 报错信息:Mount ...

  8. django 常用 import

    from django.shortcuts import HttpResponse, render, redirect def yimi(request): #直接返回页面内容 return Http ...

  9. 一、表单和ajax中的post请求&&后台获取数据方法

    一.表单和ajax中的post请求&&后台获取数据方法 最近要做后台数据接收,因为前台传来的数据太过于混乱,所以总结了一下前台数据post请求方法,顺便写了下相对应的后台接收方法. 前 ...

  10. EBCDIC to ASCII

    EBCDIC to ASCII https://www.ibm.com/support/knowledgecenter/SSZJPZ_11.7.0/com.ibm.swg.im.iis.ds.parj ...