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

var _PageHeight = document.documentElement.clientHeight,

_PageWidth = document.documentElement.clientWidth;

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

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

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

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

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

4.呈现loading效果

document.write(_LoadingHtml);

//window.onload = function () {

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

//    loadingMask.parentNode.removeChild(loadingMask);

//};

5.监听加载状态改变（这一步是防止LOADING出错）

document.onreadystatechange = completeLoading;

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

function completeLoading() {

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

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

loadingMask.parentNode.removeChild(loadingMask);

}

}

说明：
将此段js代码放入<head>最后即可；
其中loading效果的样式可以根据自己的风格修改，loading.gif这个图片需要自己找
 
这个用JQ也可以实现。

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

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

    页面加载readyState的五种状态 原文如下: 0: (Uninitialized) the send( ) method has not yet been invoked. 1: (Loadin ...

  2. JS判断页面加载完毕

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

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

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

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

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

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

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

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

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

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

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

  8. jQuery页面加载完毕事件及jQuery与JavaScript的比较

    1.jQuery概述 jQuery是一个JavaScript库,它集成了JavaScript.DOM.CSS和Ajax,简化了JavaScript编程,提倡write less, do more. 2 ...

  9. JS在页面加载之后运行

    通用的页面加载后再运行JS有两种方式:1.在DOM加载完毕后,页面全部内容(如图片等)完全加载完毕前运行JS.   2.在页面全部内容加载完成(包括引用文件,图片等)之后再加载JS 1.在DOM加载后 ...

随机推荐

  1. ABAP宏--Macros

    定义语法 DEFINE macro. ... &1 ... &9 ... END-OF-DEFINITION. 调用语法: macro [p1 p2 ... ]. 最多时能有9参数 例 ...

  2. WinSCP无法连接 ubuntu 的解决方法

    ubuntu默认不安装sshd服务 需要sudo apt-get install ssh 你可以在ubuntu本机ssh localhost测试是否成功安装了ssh 因为WinSCP是基于ssh的sf ...

  3. 一文说尽C++赋值运算符重载函数(operator=)

    写在前面: 关于C++的赋值运算符重载函数(operator=),网络以及各种教材上都有很多介绍,但可惜的是,内容大多雷同且不全面.面对这一局面,在下在整合各种资源及融入个人理解的基础上,整理出一篇较 ...

  4. 在SQL SERVER中获取表中的第二条数据

    在SQL SERVER中获取表中的第二条数据, 思路:先根据时间逆排序取出前2条数据作为一个临时表,再按顺时排序在临时表中取出第一条数据 sql语句如下: select top 1 * from(se ...

  5. JAVA 1.5 运算符

    1. 关系运算符:大于(>).小于(<).等于(==).不等于(!=).大于等于(>=).小于等于(<=),关系运算的结果是个boolean值.2. 逻辑运算符:重点讲解两个, ...

  6. Android单例线程池

    package com.jredu.schooltong.manager; import java.util.concurrent.ExecutorService;import java.util.c ...

  7. Adroid 展开收起效果实现

    Layout <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns ...

  8. Makefile中头文件在依赖关系中作用

    摘于:http://bbs.csdn.net/topics/120024677 (1)在makefile的依赖关系中用不用体现.h头文件?(2)如果在依赖关系中要体现.h头文件,应该体现到什么层次?＝ ...

  9. easyx与VS2015

    7.10 之前在文件头将__acrt_iob_func重定义&__iob_func,在格子涂色的程序中解决了问题:然而在俄罗斯方块的程序中出现了更多的问题,好像是FILE在其他外部依赖项cor ...

  10. iOS开发 滤镜的使用

    iOS开发之滤镜的使用技巧(CoreImage)   一.滤镜的内容和效果是比较多并且复杂的 ,学习滤镜需要技巧 如下: 两个输出语句解决滤镜的属性选择问题: 1.查询效果分类中包含什么效果按住com ...