一、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: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>';

//呈现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);

}

}

加载状态为complete时移除loading效果的更多相关文章

  1. js 判断页面加载状态

    //----判断当前页面是否加载状态 开始 ---- document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法. function ...

  2. 动态加载JS文件,并根据JS文件的加载状态来执行自己的回调函数

    动态加载JS文件,并根据JS文件的加载状态来执行自己的回调函数, 在很多场景下,我们需要在动态加载JS文件的时候,根据加载的状态来进行后续的操作,需要在JS加载成功后,执行另一方法,这个方法是依托在加 ...

  3. IOS 多个UIImageView 加载高清大图时内存管理

    IOS 多个UIImageView 加载高清大图时内存管理 时间:2014-08-27 10:47  浏览:59人 当我们在某一个View多个UIImageView,且UIImageView都显示的是 ...

  4. RxJava异步请求加载状态控制

    在我看来,RxJava最大的特点就是异步,无论你是解析复杂的数据或是IO操作,我们都可以利用它内置的线程池进行线程间的调度,简单的使用 subscribeOn(Schedulers.io()).doO ...

  5. Sql 问题---在尝试加载程序集 ID 65537 时 Microsoft .NET Framework 出错.服务器可能资源不足

    新库是直接复制的模板库 执行存储过程时报如下错 消息 10314,级别 16,状态 11,过程sp_Sync_CmsArticleToSearchs,第 30 行在尝试加载程序集 ID 65645 时 ...

  6. 尝试加载 Oracle 客户端库时引发 BadImageFormatException

    尝试加载 Oracle 客户端库时引发 BadImageFormatException 工程师给计算机诊断,就像医生给病人诊断一样,很多同样的症状,可能是由多种截然不同的原因导致的.   最近进行C# ...

  7. 尝试加载 Oracle 客户端库时引发 BadImageFormatException。问题记录

    电脑是win8 64位,安装oracle 11g r2 64位的,谁知道一切装完毕后,打开项目却连不上oracle数据了...首先是pl/sql连不上,装了oracle服务器,应该是不用再装客户端,p ...

  8. Visual Studio《加载此属性页时出错》的解决办法

    打开aspx页面时不能切换到设计视图,vs 2008工具箱中无控件.打开vs 2008的工具>选项>HTML设计器时提示:加载此属性页时出错 有时还会有其它错误提示,比如打开一个Windo ...

  9. bootstrap按钮加载状态改变

    bootstrap里面有个激活按钮的时候,按钮变成不可用的: 按照官网里面的方法介绍是在button按钮加个data-loading-text="Loading..."属性,然后j ...

随机推荐

  1. 签名有元程序集 Signed Friend Assemblies

    下面的例子演示了创建签名程序集和有元程序集.这就要求两个程序集都是强命名,在下面的例子中,两个程序集都用了同一个秘钥,也可以用不同的秘钥. 1. 生成秘钥, 这个在前面的博客中有说明,生成秘钥文件sn ...

  2. Javascript setTimeout 带参数延迟执行 闭包实现

    不是原创,只是 借鉴别人的成果,我在此纪念 1.htm function GetDateT() { var d,s; d = new Date(); s = d.getFullYear() + &qu ...

  3. CentOS7安装Ambari

    环境: CentOS7安装两个节点:master.slave1.并配置ssh无密码登录. 步骤: 获取 Ambari 的公共库文件(public repository): wget http://pu ...

  4. IIS------Http错误:50019,由于权限不足无法读取配置文件

    转载: http://niutuku.com/tech/2008/273661.shtml 注意:该用户名称必须是:Everyone

  5. 安装ubuntu和安装ubuntu后要安装的软件列表

    安装ubuntu 老毛桃进入win pe修复启动项 在win pe下面制作ubuntu的安装盘,只用的软件是ultraISO 参考博客下面的分区的那篇文章  http://jingyan.baidu. ...

  6. ASP.NET MVC WebGrid – Performing true AJAX pagination and sorting 【转】

    ASP.NET MVC WebGrid – Performing true AJAX pagination and sorting FEBRUARY 27, 2012 14 COMMENTS WebG ...

  7. cookie和session的对比

    1.存放的位置     cookie存在客户端的临时文件夹     session:存在服务器的内存中,一个session域对象为一个用户浏览器服务. 2.安全性   cookie是以明文方式存放在客 ...

  8. python 正则,常用正则表达式大全

    Nginx访问日志匹配 re.compile #re.compile 规则解释,改规则必须从前面开始匹配一个一个写到后面,前面一个修改后面全部错误.特殊标准结束为符号为空或者双引号:  改符号开始 从 ...

  9. JavaScript中一些怪异用法的理解

    引言 JavaScript这门语言有些场合的用法还是比较怪异的.这篇文章会尽量将这门语言特有的一些比较特殊的用法收集在一起.就当是平时开发时需要注意的地方吧. 特殊用法收集 1.!!用法 在JavaS ...

  10. [MongoDB]mapReduce

    摘要 上篇文章介绍了count,group,distinct几个简单的聚合操作,其中,group比较麻烦一点.本篇文章将学习mapReduce的相关内容. 相关文章 [MongoDB]入门操作 [Mo ...