很多时候我们需要引入框架来开发项目,这时我们可能会遇到页面还没加载完源码出来了的问题,给用户一种不好的视觉体验,这是便需要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加载的更多相关文章

  1. 使用Dialog实现全局Loading加载框

    Dialog实现全局Loading加载框 很多人在实现Loading加载框的时候,都是在当前的页面隐藏一个Loading布局,需要加载的时候,显示出来,加载完再隐藏 使用Dialog实现Loading ...

  2. vue+elementUI+axios实现的全局loading加载动画

    在项目中,很多时候都需要loading加载动画来缓解用户的焦虑等待,比如说,我打开了一个页面,而这个页面有很多接口请求,但浏览器的请求并发数就那么几个,再加上如果网速不行的话,那么这时候,用户很可能就 ...

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

    今天这篇文章是给大家分享的loading加载的设计,文章里面会有一些实例在这分享给大家! 大多数App都要与服务器进行数据的交换,App向服务器发出数据请求,服务器接收到请求之后向App传输相应数据, ...

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

    在windows开发界面时,使用浏览器来请求和显示网页内容,是比较常见的. 但是在请求网页内容时,因网速或者前端功能复杂加载较慢,亦或者加载时遇到各种问题,如空白/黑屏/加载不完整/证书问题等. 因此 ...

  5. loading加载和layer.js

    layer.js中的loading加载 l本篇主要介绍layerjs中的loading加载在实际项目中的应用 1.使用的技术 前端:HTML5+CSS3+JS+layer.js 后端:.net 2.遇 ...

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

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

  7. vue-element-admin 全局loading加载等待

    最近遇到需求: 全局加载loading,所有接口都要可以手动控制是否展示加载等待的功能 当拿到这个需求的时候我是拒绝的,因为我以及局部写好了0.0,这是要大改呀....,没办法老板的要求,只能硬着头皮 ...

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

    loading加载效果 由于程序和网络的原因,常常我们需要在交互的时候,给用户一个正在加载中的动画,于是,loading组件横空出世.不需要复杂的代码,也能完成大多数业务,这就是我做组件的原则. 效果 ...

  9. 2款不同样式的CSS3 Loading加载动画 附源码

    原文:2款不同样式的CSS3 Loading加载动画 附源码 我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...

随机推荐

  1. WeexSDK之注册Handlers

    先看代码: + (void)_registerDefaultHandlers { [self registerHandler:[WXResourceRequestHandlerDefaultImpl ...

  2. SDWebImage之SDWebImageDownloaderOperation

    上篇讲了SDWebImageDownloader,从源码分析的过程中,我们知道,实际执行下载任务的是SDWebImageDownloaderOperation,本篇我们来看看SDWebImageDow ...

  3. Javascript高级编程学习笔记(9)—— 执行环境

    今天主要讲一下,JS底层的一些东西,这些东西不太好举例(应该是我水平不够) 望大家多多海涵,比心心 执行环境 执行环境(执行上下文,全文使用执行环境 )是JS中最为重要的一个概念,执行环境决定了,变量 ...

  4. react-router V4中的url参数

    概述 之前写过react在router中传递数据的2种方法,但是有些细节没有理清楚,现在补上,记录下来,供以后开发时参考,相信对其他人也有用. 参考资料:stackoverflow react rou ...

  5. input可以自动换行吗???

    某天,在项目开发的时候,后台java问我input可以换行吗,当时我也是有点懵逼,思考了几秒钟说应该可以,然后就开始尝试各种方法.然后,然后就打脸了.... 最后发现,原来input没有自动换行功能, ...

  6. spring boot log4j2配置

    [传送门]:log4j官网配置文件详解 1. 排除 spring boot 自带的  spring-boot-starter-logging 依赖 <dependency> <gro ...

  7. python中除法的注意事项

    使用python数据处理,代码如下: import numpy as np fs = 5 ts = np.arange(-1,1+1/fs,1/fs) 发现了这样一个错误: Traceback (mo ...

  8. Python Web Service

    搞移动端有段时间了,一直使用别人的API,自己也只写过ASP.NET网站作为网络服务,相对来讲是很大的短板.虽然ASP.NET可以提供想要的web服务,但是其体量臃肿,响应速度非常慢,这点我非常不喜欢 ...

  9. 678 "流浪地球"为什么是个好地方?(系统越复杂拥有好运气的机会也就越大)

    运气,其实就是一个复杂系统孕育出的,超出已知经验的解决方案.它不是没有产生机制.只不过,这个机制太复杂,涉及的因素太多.我们没法复制.所以,我们只能笼统的,把这套机制称为运气,或者命数. 举个例子,假 ...

  10. ubuntu18.04 出现 Command 'ifconfig' not found 问题的解决办法

    我们在虚拟主机中查看ip地址需要输入ifconfig,但是报以下错误: 系统提示我们安装 net-tools,当我们输入以下命令,即可安装完成. sudo apt-get install net-to ...