一、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. angularjs中ng-change使用方法

    ng-change需与ng-model结合使用,官网说明如下:Note, this directive requires ngModel to be present. <label for=&q ...

  2. 10月21日下午PHP常用函数

    函数四要素:返回类型  函数名  参数列表  函数体 //最简单的函数定义方式 function Show() { echo "hello"; } Show();//输出结果为he ...

  3. win7下exe提示无法正常启动(0xc0000906)

    本人遇见是 avast问题,卸了

  4. Echarts 页面多图自适应的解决办法 (转)

    项目中用到了echarts的多图表的 问题,如果设置了 window.onresize  = option.chart.resize() 只能控制 某个图表的 自适应,如果要是页面上的图表都要自适应. ...

  5. live555库中的testRTSPClient实例

    1.testRTSPClient简介 testRTSPClient是个简单的客户端实例,这个实例对rtsp数据交互作了详细的描述,其中涉及到rtsp会话的两个概念Source和Sink. Source ...

  6. nginx配置图片防盗链

    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)${ expires 30d; access_log off; valid_referers none blocked ...

  7. <meta>标签元素的属性理解

    meta是用来在HTML文档中模拟HTTP协议的响应头报文.meta 标签用于网页的<head>与</head>中,meta 标签的用处很多.meta 的属性有两种:name和 ...

  8. Redis-cluster集群【第三篇】:redis主从

    Redis主从复制原理: 通过把这个RDB文件或AOF文件传给slave服务器,slave服务器重新加载RDB文件,来实现复制的功能! 复制的话:主服务器可以有多个从服务器!!!  不仅这样从服务器还 ...

  9. Effective Objective-C 2.0 — 第四条:多用类型常量,少用#define预处理指令

    第四条:多用类型常量,少用#define预处理指令 使用#define 预处理的坏处:定义出来的常量没有类型信息,编译器只是会在编译前据此执行查找与替换操作.即使有人重新定义了常量值,编译器也不会产生 ...

  10. YII2数据库依赖缓存

    首先配置一下缓存,自己选择是用文件缓存还是数据库缓存等. 'cache' => [ 'class' => 'yii\caching\FileCache', ], 然后就可以通过 Yii:: ...