ajax请求完之前的loading加载
很多时候我们需要引入框架来开发项目,这时我们可能会遇到页面还没加载完源码出来了的问题,给用户一种不好的视觉体验,这是便需要loading加载了,来完善用户体验!
/*loading.js*/
// 加载HTML图
var _LoadingHtml = '<div id="loadingDiv" style="position:fixed;left: 0;top: 0;right: 0;bottom: 0;z-index: 99999;background-color: #fff;"><div style="position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);"><img src="data:images/loading.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);
}
}
ajax请求完之前的loading加载的更多相关文章
- 使用Dialog实现全局Loading加载框
Dialog实现全局Loading加载框 很多人在实现Loading加载框的时候,都是在当前的页面隐藏一个Loading布局,需要加载的时候,显示出来,加载完再隐藏 使用Dialog实现Loading ...
- vue+elementUI+axios实现的全局loading加载动画
在项目中,很多时候都需要loading加载动画来缓解用户的焦虑等待,比如说,我打开了一个页面,而这个页面有很多接口请求,但浏览器的请求并发数就那么几个,再加上如果网速不行的话,那么这时候,用户很可能就 ...
- APP的六种loading加载样式,全在这...
今天这篇文章是给大家分享的loading加载的设计,文章里面会有一些实例在这分享给大家! 大多数App都要与服务器进行数据的交换,App向服务器发出数据请求,服务器接收到请求之后向App传输相应数据, ...
- WPF 客户端浏览器 添加Loading加载进度
在windows开发界面时,使用浏览器来请求和显示网页内容,是比较常见的. 但是在请求网页内容时,因网速或者前端功能复杂加载较慢,亦或者加载时遇到各种问题,如空白/黑屏/加载不完整/证书问题等. 因此 ...
- loading加载和layer.js
layer.js中的loading加载 l本篇主要介绍layerjs中的loading加载在实际项目中的应用 1.使用的技术 前端:HTML5+CSS3+JS+layer.js 后端:.net 2.遇 ...
- jquery加载数据时显示loading加载动画特效
插件下载:http://www.htmleaf.com/jQuery/Layout-Interface/201505061788.html 插件使用: 使用该loading加载插件首先要引入jQuer ...
- vue-element-admin 全局loading加载等待
最近遇到需求: 全局加载loading,所有接口都要可以手动控制是否展示加载等待的功能 当拿到这个需求的时候我是拒绝的,因为我以及局部写好了0.0,这是要大改呀....,没办法老板的要求,只能硬着头皮 ...
- [js开源组件开发]loading加载效果
loading加载效果 由于程序和网络的原因,常常我们需要在交互的时候,给用户一个正在加载中的动画,于是,loading组件横空出世.不需要复杂的代码,也能完成大多数业务,这就是我做组件的原则. 效果 ...
- 2款不同样式的CSS3 Loading加载动画 附源码
原文:2款不同样式的CSS3 Loading加载动画 附源码 我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...
随机推荐
- Android精通:View与ViewGroup,LinearLayout线性布局,RelativeLayout相对布局,ListView列表组件
UI的描述 对于Android应用程序中,所有用户界面元素都是由View和ViewGroup对象构建的.View是绘制在屏幕上能与用户进行交互的一个对象.而对于ViewGroup来说,则是一个用于存放 ...
- C++随机数引擎
C++的随机数引擎有以下几个要点需要注意: 1.随机数发生器使用同一种子会生成相同序列的随机数序列 2.为了让程序每次运行都会生成不同的随机结果,我们可以使用 time(0) 产生一个随机数种子 3 ...
- linux中Java项目占用cpu、内存过高时的排查经历
一.使用top命令查看占用高资源的java项目的进程ID(pid): top 二.查看该进程中的线程所占用资源的情况:top -Hp pid 三.查看该线程对应的16进制:printf %x 1112 ...
- java面试题:当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递?
答:是值传递.Java编程语言只有值传递参数. 当一个对象实例作为一个参数被传递到方法中时,参数的值就是该对象的引用一个副本.指向同一个对象,对象的内容可以在被调用的方法中改变,但对象的引用(不是引用 ...
- 如何把checkbox做成radio一样的单选效果
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>复 ...
- Oracle 创建表并设置主键自增
创建数据库 CREATE TABLE STUDENT(ID NUMBER PRIMARY KEY, NAME VARCHAR(200) NOT NULL, SEX VARCHAR(200), CREA ...
- Linux_CentOS-服务器搭建 <二>
Tomat安装: 说明: 源码安装,下载地址:http://tomcat.apache.org/.我下了个apache-tomcat-7.0.42.tar.gz 安装开始: 配置环境. JDK: vi ...
- 基于redis的分布式ID生成器
基于redis的分布式ID生成器
- Codeforces/TopCoder/ProjectEuler/CodeChef 散题笔记 (持续更新)
最近做到了一些有趣的散题,于是开个Blog记录一下吧… (如果有人想做这些题的话还是不要看题解吧…) 2017-03-16 PE 202 Laserbeam 题意:有一个正三角形的镜子屋,光线从$C$ ...
- leetcode — zigzag-conversion
/** * Source : https://oj.leetcode.com/problems/zigzag-conversion/ * * Created by lverpeng on 2017/6 ...