ajax请求完之前的loading加载

很多时候我们需要引入框架来开发项目,这时我们可能会遇到页面还没加载完源码出来了的问题,给用户一种不好的视觉体验,这是便需要loading加载了,来完善用户体验!

 1 /*loading.js*/
 2 // 加载HTML图
 3 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="images/loading.gif" style="vertical-align: middle;width: 100px;">加载中。。。</div></div>';
 4 
 5 // 呈现loading效果
 6 document.write(_LoadingHtml);
 7 
 8 // 监听加载状态改变
 9 document.onreadystatechange = completeLoading;
10 
11 // 加载状态为complete时移除loading效果
12 function completeLoading() {
13     if (document.readyState == "complete") {
14         var loadingMask = document.getElementById('loadingDiv');
15         loadingMask.parentNode.removeChild(loadingMask);
16     }
17 }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏魏艾斯博客www.vpsss.net

腾讯云COS对象存储WordPress插件 让网站动静分离跑的更快

腾讯云 COS 对象存储是利用云存储空间来存放静态文件,让网站动静分离跑的更快。我们平时用 wordpress 博客较多,而适用于腾讯云的很多都失效不好用了,今...

76220
来自专栏Crossin的编程教室

如何用Python抓抖音上的小姐姐

爬虫的案例我们已讲得太多。不过几乎都是网页爬虫。即使有些手机才能访问的网站,我们也可以通过 Chrome 开发者工具的手机模拟功能来访问,以便于分析请求并抓取。...

22240
来自专栏一“技”之长

Xcode创建可复用的代码块 原

        在各种程序开发中,编写代码的效率是非常重要的一个问题,各种优秀的编译器也都有相应的插件用于提高程序员的编码速度。在xcode中,可以通过定义代码...

15520
来自专栏ionic3+

《跳一跳》小程序,python作弊ios版细节说明

功能不止作弊这么玩,其实很强大的,如常用于手机应用自动化测试,具体内容可以参考下文: 基于WebDriverAgent代理服务,实现iOS手机app自动化测试...

15240
来自专栏静晴轩

Webpack 打包优化之速度篇

在前文 Webpack 打包优化之体积篇中,对如何减小 Webpack 打包体积,做了些探讨;当然,那些法子对于打包速度的提升,也是大有裨益。然而,打包速度之于...

43820
来自专栏Python自动化测试

selenium 3.0.1遇到问题的解决方案

迄今为止,我个人认为,selenium是最好使用的web应用程序的自动化测试框架,不仅仅因为它是开源的优势之一,更加重要的是它可以支持的语言比较多,像...

13520
来自专栏信安之路

Windows下优雅地书写MarkDown

自从将博客搬到Hexo之后,书写MarkDown文档的频率就大大提高了,在享受着免排版的语法优势的同时又深深地受插入图片所困扰。找图床、加链接,大大降低了写文档...

13000
来自专栏好好学习吧

LoadRunner菜鸟入门学习笔记

  11.0 最高ie9( win7 32位+LR11+IE10可用,但win7 64位+LR11+IE10不可用,降至IE9可用),支持firefox3.6、...

1.7K20
来自专栏零基础使用Django2.0.1打造在线教育网站

零基础使用Django2.0.1打造在线教育网站(十五):模板继承应用

努力与运动兼备~~~有任何问题可以加我好友或者关注微信公众号,欢迎交流,我们一起进步!

16810
来自专栏敏捷开发&项目管理

微信小程序开发 (资料汇总,谁还没被坑过?希望助你绕过一些坑)

最近帮人家做一个微信小程序,刚好想熟悉一下。由于牵扯到多用户使用系统,以及数据共享,所以自然架构选择了,客户端和服务器的方式。

34930

扫码关注云+社区

领取腾讯云代金券