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. c++多线程の数据竞争和互斥对象

    看两个代码: void function() { ;i>;i--) { cout<<"from sub thread"+i<<endl; } } vo ...

  2. 删除github仓库中的某个文件夹

    最近在做一个项目,由于前期文件夹名是中文,如下:    |---Repository       |--- React单页面音乐播放器 并且git push到了github上. 后来在本地把文件夹re ...

  3. bate阶段项目总结

    Beta里程碑总结 设想和目标 1. 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 要解决的问题是如何实现消息的发布与查看以及个人主页的实现:定义的基本清楚,团队 ...

  4. HTML中使背景图片自适应浏览器大小

    由于<body>标签的图片不能够拉伸, 解决办法: 1.图片不够大,又background属性不能拉伸图片: 2.只能用个div,把其z-index值设为负,并使这个div大小为整个bod ...

  5. 慕课网__css_ float

  6. $.unique()去重问题

    var yearArray = new Array(2009, 2009, 2010, 2010, 2009, 2010);$.unique(yearArray); 返回 2009, 2010, 20 ...

  7. usb中的传输模式

    别人总结的一个usb传输模式,保存一下 usb中的endpoint(端点)和传输模式 端点: 端点位于USB 外设内部,所有通信数据的来源或目的都基于这些端点,是一个可寻址的FIFO. 每个USB 外 ...

  8. Mysql安装出现=========== install/remove of the Service Denied

    在安装mysql过程中遇到一个问题  install/remove of the Service Denied,这个问题说明自己没有安装和删除的权利,原因是自己在运行cmd过程是没有使用管理员身份运行 ...

  9. activeMQ 安装于使用

    简易教程: http://blog.csdn.net/jiuqiyuliang/article/category/5617711

  10. cocos2d-x 图片性能测试

    本文是原创文章,如需转载,请注明文章出处 本次测试使用的cocos2d-x版本是3.9,测试环境是XCode7自带的iphone5 一.JPG格式与PVR.CCZ格式对比 1.占用空间对比 a)不透明 ...