页面加载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. SQL server 查看什么语句在使用临时表

    SQL server 查询那些语句在使用临时表 最近在日常的性能测试工作中发现,数据库端的IO读写比较大,有规律的2-8M的波动,数据库的版本为 SQL server 2008 sp3. 这些IO操作 ...

  2. JAVA线程同步通信

    以下讲解Lock线程同步通信,也是比synchronized强大的一个功能点 先看一个常规的案例: 用户类 public class Person { public void eat(){ for(i ...

  3. shell脚本从入门到精通（初级）之入门篇

    写在开头 本文是阅读<Linux命令行与shell脚本编程大全>时的一些笔记,主要是shell脚本的一些基本语法, 还有很多细节和高级内容没有写到. 笔者也是shell script菜鸟, ...

  4. 剑指offer学习--初级c++面试题

    定义一个空的类型,里面没有任何成员函数和成员变量,对该类型求sizeof,得到的结果是多少? 答案是1.空类型中的实例中不包含任何信息,本来求sizeof应该是0,但是当我们声明该类型的实例的时候,他 ...

  5. js中的对象类型的基本操作

    示例 /** * 对象属于一种复合数据类型,在对象中可以保存多个不同数据类型的属性 * 对象的分类: * 1.内建对象 * - 由ES标准定义的对象,在任何ES的实现中都可以使用,比如:Math, * ...

  6. CSS-01 CSS代码标准和规范

    一:代码规范 1.所有的书写都是在英文半角下进行 2.统一用table键进行缩进 3.属性值必须带引号(单引和双引都可以) 4.p,dt,h标签里不能嵌套块属性标签 5.a标签不能嵌套a 二:文件命名 ...

  7. 转载一篇别人分享的VSFTPD.CONF的中文解释方便以后查询

    # 服务器以standalong模式运行,这样可以进行下面的控制 listen=YES # 接受匿名用户 anonymous_enable=YES # 匿名用户login时不询问口令 no_anon_ ...

  8. 98-基于FPGA Spartan6 的双路光纤PCIe采集卡(2路光纤卡) 光纤PCIe卡

    1.板卡概述 板卡采用xilinx Spartan6系列芯片,支持 PCI Express Base Specification 1.1 x1.内含丰富的逻辑资源和存储单元,板卡FPGA外接双片32M ...

  9. Git--09 创建Maven项目

    目录 1. 创建Maven项目 2.创建Maven私服nexus 01. 部署Maven 02. 编译测试 03. 部署Tomcat及数据库 04. 创建一个jeesns项目 05. Jenkins创 ...

  10. NodeJs初相识

    一.nodeJs简介 1.Node 是一个服务器端 JavaScript 解释器. 2.Node 的目标是帮助程序员构建高度可伸缩的应用程序,编写能够处理数万条同时连接到一个物理机的连接代码.处理高并 ...