一、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. C#获取C++中修改过的float数组(指针),dll

    C++中 struct rankPoint{ float sim; }; ]){ ; i < ; i++) prank[i].sim = ; ; i < ; i++) prank[i].s ...

  2. ASP------ActioinResult之多种返回值

    转载: http://www.cnblogs.com/jiagoushi/archive/2013/01/24/2875454.html http://www.cnblogs.com/lvcha/ar ...

  3. WinForm------PopupMenu控件的使用

    转载: http://www.cnblogs.com/xlx0210/archive/2010/07/14/1777366.html

  4. ecshop 点击领取红包

    思路: 1.领取红包:也就是传递一个红包ID,和user_id然后update更新过来 2.获取未领取过的红包列表:然后随机函数array_rand($arr,1),随机返回一个数组,从而获得红包列表 ...

  5. JavaScript中变量和函数声明的提升

    现象: 1.在JavaScript中变量和函数的声明会提升到最顶部执行. 2.函数的提升高于变量的提升. 3.函数内部如果用var声明了相同名称的外部变量,函数将不再向上寻找. 4.匿名函数不会提升. ...

  6. DIOCP 运作核心探密

    来自网友天地弦的DIOCP早已经广为人知了,有很多的同学都用上了它,甚至各种变异.修改版本也出了不少.我最近也在学习DIOCP,打算将它用于自己的服务端,今天让我们来一起探密它(DIOCP)的运作核心 ...

  7. thinkphp succes error跳转模板 设置

    执行成功 换成自己想要的模块 下面的路径是默认的模板\ThinkPHP\Tpl\dispatch_jump.tpl D:\wamp\www\ThinkPHP\Tpl\dispatch_jump.tpl ...

  8. Zabbix 3.0 安装笔记

    Zabbix 3.0 只支持CentOS 7.0以上版本,所以先在虚拟机中安装好CentOS 7.0 x64,并设置好IP,允许虚拟机联网. 1.安装MySQL 从最新版本的linux系统开始,默认的 ...

  9. array_map()与array_shift()搭配使用 PK array_column()函数

    array_map()与arra_shift()搭配使用,还是来看例子吧,比较直观一点 <?php $user = array( 0 => array( 'name' => '张三' ...

  10. linux访问windows共享文件夹的方法

    博客转自:http://www.01happy.com/linux-access-windows-shares-folders/ 有时需要在linux下需要访问windows的共享文件夹,可以使用mo ...