页面加载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. stl应用（map）或字典树（有点东西）

    M - Violet Snow Gym - 101350M Every year, an elephant qualifies to the Arab Collegiate Programming C ...

  2. luoguP1081 开车旅行 题解(NOIP2012)

    这道题是真滴火!(一晚上加一节信息课!) 先链接一下题目:luoguP1081 开车旅行 首先,这个预处理就极其变态,要与处理出每一个点往后走A会去哪里,B会去哪里.而且还必须O(nlogn)给它跑出 ...

  3. photoshop中调整图层的颜色深浅明暗

    图像-调整-可选颜色, 选中某一个颜色如绿色,可以将绿色调的深一点或浅一点

  4. shlwapi.h文件夹文件是否存在

    { if( NULL == lpszFileName) { return FALSE; } if (PathFileExists(lpszFileName)) { return TRUE; } els ...

  5. 前端学习(三十六）promise（笔记）

    一个页面:  头部.用户信息.新闻列表 jquery ajax:  1.$.ajax({    url:'',    dataType:'json', }).then(res=>{    //r ...

  6. Sass函数：数字函数-percentage()

    1.percentage() percentage()函数主要是将一个不带单位的数字转换成百分比形式: >> percentage(.2) 20% >> percentage( ...

  7. ubuntu安装Scala

    参考地址:https://blog.csdn.net/qq_36743482/article/details/78317549 1.下载Scala:http://www.scala-lang.org/ ...

  8. web安全—tomcat禁用WebDAV或者禁止不需要的 HTTP 方法

    现在主流的WEB服务器一般都支持WebDAV,使用WebDAV的方便性,呵呵,就不用多说了吧,用过VS.NET开发ASP.Net应用的朋友就应该 知道,新建/修改WEB项目,其实就是通过WebDAV+ ...

  9. C#高级编程42章 MVC

    42.1 ASP.NET MVC 路由机制 网络介绍链接 按照传统,在很多Web框架中(如经典的ASP.JSP.PHP.ASP.NET等之类的框架),URL代表的是磁盘上的物理文件.例如,当看到请求h ...

  10. 人生苦短_我用Python_OS对目录/文件操作_005

    # coding=utf-8 import os # 操作文件和目录 ", os.getcwd()) # 获取当前文件的目录 ", os.path.realpath(__file_ ...