ajax请求完成之前的loading加载效果

/*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);

  }

}

留作笔记,亲测可用~

原文地址:https://www.cnblogs.com/xuniannian/p/9857979.html

时间: 2024-10-10 05:16:29

ajax请求完成之前的loading加载效果的相关文章

[js开源组件开发]loading加载效果

loading加载效果 由于程序和网络的原因,常常我们需要在交互的时候,给用户一个正在加载中的动画,于是,loading组件横空出世.不需要复杂的代码,也能完成大多数业务,这就是我做组件的原则. 效果如下图: 这里演示了三种不一样的效果. 1.loading效果显示在按钮自己身上,这是极好的 2.loading效果显示在其他dom上, 3.loading全屏显示,不明觉厉. 实例demo演示请点击这里http://www.lovewebgames.com/jsmodule/loading.htm

移动端最强适配(rem适配之px2rem)&amp;&amp; 移动端结合Vuex实现简单loading加载效果

一.rem之px2rem适配 前言:相信许多小伙伴上手移动端时面对各式各样的适配方案,挑选出一个自己觉得简便.实用.高效的适配方案是件很纠结的事情. 深有体会... 经过多个移动端项目从最初的 viewport --> 百分比 --> rem --> rem的升级版px2rem可谓是一把鼻涕一把泪啊 ,在px2rem之前总觉得之前的不够完美或者麻烦: 进入正题: 首先 px2rem 也是基于 rem  适配的,但是他的好用之处在于灵活.简便.高效不用我们自己去换算.px2rem-load

APP的六种loading加载样式,全在这...

今天这篇文章是给大家分享的loading加载的设计,文章里面会有一些实例在这分享给大家! 大多数App都要与服务器进行数据的交换,App向服务器发出数据请求,服务器接收到请求之后向App传输相应数据,App接收成功后显示数据内容,没有接收成功则反馈数据接收失败.在这个数据交换过程中,由于网络原因,需要花费一定时间,也就是说用户要等待加载完成,这个时候就要用到loading加载机制,它告诉用户,App正在努力为您加载数据,您稍安勿躁.好的loading设计能减弱用户的等待焦虑,不合理的loadin

APP的六种loading加载样式

今天这篇文章是给大家分享的loading加载的设计,文章里面会有一些实例在这分享给大家! 大多数App都要与服务器进行数据的交换,App向服务器发出数据请求,服务器接收到请求之后向App传输相应数据,App接收成功后显示数据内容,没有接收成功则反馈数据接收失败.在这个数据交换过程中,由于网络原因,需要花费一定时间,也就是说用户要等待加载完成,这个时候就要用到loading加载机制,它告诉用户,App正在努力为您加载数据,您稍安勿躁.好的loading设计能减弱用户的等待焦虑,不合理的loadin

ajax一个很好的加载效果

推荐一个常用的jquery加载效果插件: 要引入这个插件的css和js: 1 <link href="<%=path %>/css/showLoading.css" rel="stylesheet" media="screen" /> 2 <script type="text/javascript" src="<%=path %>/js/jquery.showLoading.

WPF 客户端浏览器 添加Loading加载进度

原文:WPF 客户端浏览器 添加Loading加载进度 在windows开发界面时,使用浏览器来请求和显示网页内容,是比较常见的. 但是在请求网页内容时,因网速或者前端功能复杂加载较慢,亦或者加载时遇到各种问题,如空白/黑屏/加载不完整/证书问题等. 因此需要一个加载进度/加载失败的显示界面. 加载进度显示 界面显示 1. 界面显示,加载进度样式可参考: 绕圈进度条 2. 添加Loading状态枚举.不加载/加载中/加载失败 1 public enum LoadingState 2 { 3 No

Android之使用帧动画实现自定义loading加载布局

在项目开发过程中,我们总是需要自定义一些和项目风格类似的loading页面,这时候我们可以考虑使用帧动画来完成这一功能 假如我们要实现如下图所示的帧动画加载效果: 我们可以选取三张帧图片: 具体在帧动画中怎么使用? An AnimationDrawable defined in XML consists of a single <animation-list> element, and a series of nested<item> tags. Each item defines

10个样式各异的CSS3 Loading加载动画

前几天我在园子里分享过2款很酷的CSS3 Loading加载动画,今天又有10个最新的Loading动画分享给大家,这些动画的样式都不一样,实现起来也并不难,你很容易把它们应用在项目中,先来看看效果图: 你也可以在这里查看DEMO演示. 下面我们来挑选几个比较典型的案例来分析一下代码. 先来看看第一个案例,是条状动画,HTML代码如下: <div id="caseVerte"> <div id="case1"></div> <

prefix css3漏斗Loading加载动画

<!DOCTYPE html><html><head><meta charset="gb2312"><title>css3漏斗Loading加载动画</title><style>* { margin: 0px; padding: 0px; border: 0px;}html, body { min-height: 100%;}body { background: radial-gradient(#eee