/*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. ABP系统设置

    代码分析 在abp中添加系统设置,都是在模块的预初始化方法中添加的. Configuration.Settings.Providers.Add<EmailSettingProvider>( ...

  2. 安卓如何将TXT文件写到特定路径

    其实就一个方法,就不贴所有代码了. /** * 写入文件方法 * @param content */ public static void write(String content) { try { ...

  3. C#如何拿到从http上返回JSON数据?

    第一章:C#如何拿到从http上返回JSON数据? 第二章:C#如何解析JSON数据?(反序列化对象) 第三章:C#如何生成JSON字符串?(序列化对象) 第四章:C#如何生成JSON字符串提交给接口 ...

  4. 解决实现OnPageChangeListener()接口的方法参数出现arg0,arg1的现象

    在安卓开发中,我们经常用到ViewPager,那么既然用到ViewPager,一般都需要去实现OnPageChangeListener()接口的三个方法. 但是有时候实现的三个方法的参数都变成agr0 ...

  5. CentOS7:ifconfig command not found解决和netstat -an

    没有 ifconfig 和netstat -an 的话安装 net-tools package yum install net-tools

  6. Spring IOC容器解析及实现原理

    最近一段时间,“容器”两个字一直萦绕在我的耳边,甚至是吃饭.睡觉的时候都在我脑子里蹦来蹦去的.随着这些天一次次的交流.讨论,对于容器的理解也逐渐加深.理论上的东西终归要落实到实践,今天就借助sprin ...

  7. 40、inner mate distance for paired reads in a bam file

    参考:https://www.biostars.org/p/106291/#106344 1.inner mate distance : the distance from the right mos ...

  8. Django框架 之 Cookie和Session初识

    Django框架 之 Cookie和Session初识 浏览目录 Cookie介绍 Django中的Cookie Session 一.Cookie介绍 1.Cookie产生的意义 众所周知,HTTP协 ...

  9. C语言结构体--位域

    有些数据在存储时并不需要占用一个完整的字节,只需要占用一个或几个二进制位即可.比如开关只有通电和断电两种状态,用 0 和 1 表示足以,也就是用一个二进位.正是基于这种考虑,C语言又提供了一种叫做位域 ...

  10. c语言判断是否是utf8字符串,计算字符个数

    #include <stdio.h> #include <string.h> #include <stdlib.h> /********************** ...