页面加载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. input限制小数点的位数

    在做限制input小数点的时候,我本来想通过vue里面的的watch监听来实现, ---实现逻辑是,通过监听输入的内容,当出现"."(点)的时候,记录通过indexOf获取点的位置 ...

  2. [BZOJ 3307]Cow Politics (LCA)

    [BZOJ 3307]Cow Politics (LCA) 题面 给出一棵N个点的树,树上每个节点都有颜色.对于每种颜色,求该颜色距离最远的两个点之间的距离.N≤200000 分析 显然对于每种颜色建 ...

  3. [Codeforces 555E]Case of Computer Network(Tarjan求边-双连通分量+树上差分)

    [Codeforces 555E]Case of Computer Network(Tarjan求边-双连通分量+树上差分) 题面 给出一个无向图,以及q条有向路径.问是否存在一种给边定向的方案,使得 ...

  4. Oracle ORA-01033: ORACLE initialization or shutdown in progress 错误解决办法. 重启服务

    今天用Oracle突然出现Oracle ORA-01033: ORACLE initialization or shutdown in progress. 想起前两天删掉了几个DBF文件,幸好还没有清 ...

  5. 使用form提交到搜狗浏览器示例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. owaspbwa tickets

    owaspbwa tickets 来源  https://sourceforge.net/p/owaspbwa/tickets/ 192 SQL Injection in pic_id paramet ...

  7. Linux ssh的的用法

    Linux ssh的的用法 ssh执行远程命令 1. 执行命令 1.执行单条命令 ubuntu@node1:~$ ssh ubuntu@172.16.10.102 hostname ubuntu@17 ...

  8. Spring Boot 项目 Maven 配置

    在配置基于Maven的Spring Boot项目的过程中,打包运行出现了一系列错误. 比如: mvn 中没有主清单属性.java.lang.NoClassDefFoundError: org/spri ...

  9. Linux就该这么学06学习笔记

    参考链接:https://www.linuxprobe.com/chapter-06.html 1.一切从“/”开始 Linux系统中的一切文件都是从“根(/)”目录开始的,并按照文件系统层次化标准( ...

  10. python数字图像处理（五） 图像的退化和复原

    import cv2 import numpy as np import matplotlib.pyplot as plt import scipy import scipy.stats %matpl ...