专栏首页互联网软件技术ajax请求完之前的loading加载

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 条评论
登录 后参与评论

相关文章

  • 本地存储之sessionStorage

      复制链接地址打开网页不会复制seessionStorage内的数据

    ProsperLee
  • H5移动端rem适配

    ProsperLee
  • 浏览器全屏非全屏切换

    ProsperLee
  • 使用Vue.js和Element-UI做一个简单的登录页面

    最近了解到Vue.js挺火的,有同学已经学习了,那我心里痒痒的也学习了一点,然后也学了一点Element组件,就做了简单的登录页面。

    业余草
  • Python列表最常见的问题【总结】

    列表是Python中使用最多的一种数据结果,如何高效操作列表是提高代码运行效率的关键,本文总结了一些python列表最常见的问题,希望能对大家有帮助。

    一墨编程学习
  • python学习之对象的三大特性

    在面向对象程序设计中,对象可以看做是数据(特性)以及由一系列可以存取、操作这些数据的方法所组成的集合。编写代码时,我们可以将所有功能都写在一个文件里,这样也是可...

    py3study
  • 遗传算法求解最值问题并可视化

    用户3577892
  • 【python游戏编程之旅】第八篇---pygame游戏开发常用数据结构

    本系列博客介绍以python+pygame库进行小游戏的开发。有写的不对之处还望各位海涵。

    马三小伙儿
  • 不确定行数的多行文本垂直水平居中的css

    ul li { position:relative; display: table; w...

    蓓蕾心晴
  • 算法-数组形式的整数加法

    版权声明: ...

    Fisherman渔夫

扫码关注云+社区

领取腾讯云代金券