/*loading.js*/

// 加载HTML图
var _LoadingHtml = '<div id="loadingDiv" style="position:fixed;left: 0;top: 0;right: 0;bottom: 0;z-index: 99999;"><div style="position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);"><img src="./load.gif" style="vertical-align: middle;width: 100px;"></div></div>';
 
// 呈现loading效果
document.write(_LoadingHtml);
 
// 监听加载状态改变
document.onreadystatechange = completeLoading;
 
// 加载状态为complete时移除loading效果
function completeLoading() {
  if (document.readyState == "complete") {
    var loadingMask = document.getElementById('loadingDiv');
    loadingMask.parentNode.removeChild(loadingMask);
  }
}
留作笔记,亲测可用~

页面加载完成前的loading加载效果的更多相关文章

  1. vue 首页背景图片加载完成前增加 loading 效果 -- 使用 new Image() 实现

    1. 创建 loading 公用组件 <template> <div class="load-container"> <div class=" ...

  2. vue项目未加载完成前显示loading...

    1.在Index.html里面加入loading的元素,让loading元素显示,让app元素隐藏 <!DOCTYPE html> <html> <head> &l ...

  3. jquery加载数据时显示loading加载动画特效

    插件下载:http://www.htmleaf.com/jQuery/Layout-Interface/201505061788.html 插件使用: 使用该loading加载插件首先要引入jQuer ...

  4. javascript图片加载完成前显示loading图片

    <html> <title>图片预加载</title> <body> <script> //判断浏览器 var Browser=new Ob ...

  5. vue中iframe加载慢,给它加loading效果

    js框架:vue ui框架:element 因为iframe加载慢,所以在它加载完成前添加loading效果,loading用的是element家的加载效果 <template> < ...

  6. 原生JS+ CSS3创建loading加载动画;

    效果图: js创建loading show = function(){ //loading dom元素 var Div = document.createElement("div" ...

  7. Loading加载页面

    一般页面有四种情况 加载中 :就是滚动页面,后台获取加载的数据,每个页面的数据不同所以就让子类来实现,直接抽象abstract了. 加载失败 :一般都需要点击后重新加载 空页面 :也需要点击后重新加载 ...

  8. css3实现loading效果--当页面加载过程中显示Loading的进度条,全部加载完成之后进度条消失

    一个页面等图片资源全部加载完成,会需要很长时间,用户体验会很差,所以我们需要loading来掩盖这个漫长的过程! emmm,定时器?写个定时器还要清除,万一造成内存泄露?定时器之间还会互相影响,呼呼呼 ...

  9. 在页面未加载完之前显示loading动画

    在页面未加载完之前显示loading动画 这里有很多比这篇博客还优秀的loading动画源码 我还参考这篇博客 loading动画代码demo 我的demo预览 <!DOCTYPE html&g ...

随机推荐

  1. VI中的多行删除与复制(转)

    VI中的多行删除与复制 法一: 单行删除,:(待删除行)d 多行删除 ,:,10d 法二: 光标所在行,dd 光标所在行以下的N行,Ndd 方法1: 光标放到第6行, 输入:2yy 光标放到第9行, ...

  2. [Python Study Notes]pynput实现对键盘控制与监控

    ''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' ...

  3. TextView 点击拨打电话

    点击TextView,拨打电话 TextView属性:android:autoLink="phone" 需要配置文件中的属性 <uses-permission android ...

  4. springmvc配置式开发下的视图解析器

    多个视图解析器优先级:

  5. C# 设置程序session过期时间

    服务器设置: 如果服务器上点击站点没有ASP这一项: 下方 角色服务 添加角色服务 安装完毕重新打开iis 点击站点 就可以看到ASP这个选项了 程序webconfig配置: <system.w ...

  6. [Elasticsearch2.x] 多字段搜索 (三) - multi_match查询和多数字段 <译>

    multi_match查询 multi_match查询提供了一个简便的方法用来对多个字段执行相同的查询. NOTE 存在几种类型的multi_match查询,其中的3种正好和在“了解你的数据”一节中提 ...

  7. [patl2-020]功夫传人

    解题关键:dfs的简单应用,需要注意类型double与int #include<cstdio> #include<cstring> #include<algorithm& ...

  8. zookeeper生成节点、删除节点 For Java

    源码地址https://github.com/Bellonor/myhadoop2.x/tree/master/myhadoop2.x/src/main/java/com/jamesfen/zooke ...

  9. c++ 子类切勿重新定义父类 non-virtual函数

    子类如果重新定义了父类的non-virtual函数则不会有多态效果. 为方便描述,这里的方法和继承方式都用public.至于原因嘛,你懂的! 1:子类直接继承父类方法 class BaseOption ...

  10. c++ public protected private 继承

    1:访问控制 1.1 public 这类型成员可以被类本身函数访问,也可以被外部创建的类对象调用.子类对象与子类内部可以访问 1.2 protected类型成员,只能被类本身函数访问.外部创建的类对象 ...