页面加载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. MySql-第七篇单表查询

    1.MySQL中可以使用+.-.*./. 1>但MySQL中没有提供字符串连接运算符,可以使用concat(a_str,'xxx')进行连接. 2>在算术表达式中使用null,将会导致整个 ...

  2. 数据仓库ETL案例学习（二）

    来自案例学习 数据仓库经过ETL成功创建之后,就可以对数据仓库进行多维分析任务. 任务主要分为: 1.设置数据源,并添加分析时所需表到数据视图. 2.创建并设置维度. 3.设置时间维. 4.设置度量属 ...

  3. C# DATETIME格式转换汇总 根据日期获取星期

    原文:C# DATETIME格式转换汇总 根据日期获取星期 C# DateTime.Now.Year --2019(年) DateTime.Now.Month --9(月) DateTime.Now. ...

  4. 实例之跑马灯，函数创建、通过ID获取标签及内部的值，字符串的获取与拼接、定时器的使用

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

  5. C#中out和ref的区别

    来源:https://www.cnblogs.com/sunliyuan/p/5999045.html 首先,俩者都是按地址传递的,使用后都将改变原来参数的数值. 其次,ref可以把参数的数值传递进函 ...

  6. XMPP即时通讯协议使用（六）——开发Openfire聊天记录插件

    转载地址:http://www.cnblogs.com/hoojo/archive/2013/03/29/openfire_plugin_chatlogs_plugin_.html 开发环境: Sys ...

  7. idea模块搭建新手党常见错误

    一.搭建java和web模块会出现的错误(此篇以分布式模块为例) 1.创建空工程 1.点击file ,在弹出的窗口左侧选项中在最后有一个Empty Project选项.此处就是创建空工程. 2.在此空 ...

  8. python常用函数 G

    groupby(Sorted_list, key) 将已排序的序列按关键字分组. 例子: group/s(int) 提出正则表达式匹配分组截获的字符串,groups返回括号匹配的字符. 例子: get ...

  9. Java使用对象类型作为方法的返回值

  10. windows平台搭建Mongo数据库复制集（类似集群）（二）

    通过rs.status()命令我们可以查询到各个节点运行正常. 一.数据同步测试 在28011.28012端口上进行插入: 因为SECONDARY是不允许读写的, 在写多读少的应用中,使用Replic ...