在请求数据加载的过程中,经常需要显示请求等待,写了一个简单的请求等待—-

html代码如下

  1. <!--页面载入显示-->
  2. <div id="dataLoad" style="display:none;position: fixed; left: 0px; right: 0px; background:#fff; bottom: 0px; top: 0px; width:350px; height:120px; margin:200px auto; z-index:999; opacity: 0.92; border: 1px solid #e8e8e8;">
  3. <table width=100% height=100% border=0 align=center>
  4. <tr>
  5. <td align=center>
  6. <img height="50" src="./image/loading.gif" />
  7. </td>
  8. <td align="left">
  9. <span style="font-weight: 900; color: #0394c3;">
  10. 数据载入中,请稍后......
  11. </span>
  12. </td>
  13. </tr>
  14. </table>
  15. </div>

在请求的过程中只需要控制<div id="dataLoad"></div>的显示和隐藏即可,js代码如下

  1. $("#dataLoad").hide(); //页面数据加载完毕后即将DIV隐藏
  2. $("#dataLoad").show(); //页面数据加载中显示DIV

当然所需的动态加载图片可以随意选择,我的加载效果如下 

动态图如下 

js玩命加载……的更多相关文章

  1. js 模版加载到前端

    js 模版加载到前端 简单有效不高端 配个路由 /js/:filename ,  用 readTemplate 响应请求,前端可以按模块方式直接 require 模板 'use strict' var ...

  2. 前端设计中关于外部js文件加载的速度优化

    在一般情况下,许多人都是将<script>写在了<head>标签中,而许多浏览器都是使用单一的线程来加载js文件的,从上往下,从左往右. 若是加载过程出错,那么网页就会阻塞,就 ...

  3. js动态加载以及确定加载完成的代码

    利用原生js动态加载js文件到页面,并在确定加载完成后调用相关function var otherJScipt = document.createElement("script") ...

  4. 第三课:sea.js模块加载原理

    模块加载,其实就是把js分成很多个模块,便于开发和维护.因此加载很多js模块的时候,需要动态的加载,以便提高用户体验. 在介绍模块加载库之前,先介绍一个方法. 动态加载js方法: function l ...

  5. js资源加载优化

    互联网应用或者访问量大的应用,对js的加载优化是不可少的.下面记录几种优化方法 CDN  + 浏览器缓存 CDN(content delivery network)内容分发网络, 最传统的优化方式.其 ...

  6. 判断JS是否加载完成

    在正常的加载过程中,js的加载都是同步的,也就是在加载过程中,浏览器会阻塞接下来的内容的加载.这时候我们就要用到动态加载,动态加载是异步的,如果我们在后边要用到这个动态加载的js文件里的东西,就要保证 ...

  7. js动态加载css文件和js文件的方法

    今天研究了下js动态加载js文件和css文件的方法. 网上发现一个动态加载的方法.摘抄下来,方便自己以后使用 [code lang="html"] <html xmlns=& ...

  8. JS懒加载

    4.如何使用js懒加载图片       a.懒加载图片是基于jquery.js的,所以: <script src="jquery.js" type="text/ja ...

  9. JS 动态加载脚本 执行回调_转

    关于在javascript里面加载其它的js文件的问题可能很多人都遇到过,但很多朋友可能并不知道怎么判断我们要加载的js文件是否加载完成,如果没有加载完成我们就调用文件里面的函数是不会成功的.本文讲解 ...

随机推荐

  1. JS优化常用片断

    防抖debounce装饰器 在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时. function debounce(func, delay) { let isCooldown = fa ...

  2. 15-Flutter移动电商实战-商品推荐区域制作

    1.推荐商品类的编写 这个类接收一个List参数,就是推荐商品的列表,这个列表是可以左右滚动的. /*商品推荐*/class Recommend extends StatelessWidget {   ...

  3. Spark-源码分析02-Luanch Executor

    1.SparkContext.scala sparkcontext 在被new的时候,会执行class中的代码 其中有一个就是创建TaskScheduler 和 SchedulerBackend,而S ...

  4. IntelliJ IDEA 查找两个字符之间任意内容正则表达式

    表达式: A.*?B(“.“表示任意字符,“?”表示匹配0个或多个)

  5. MySQL 开启远程链接(localhost 以外的主机)

    1.在连接服务器后,操作mysql系统数据库 命令为:  mysql -u root -p use mysql: 查询用户表命令:select  User,authentication_string, ...

  6. 过拟合产生的原因(Root of Overfitting)

    之前在<过拟合和欠拟合(Over fitting & Under fitting)>一文中简要地介绍了过拟合现象,现在来详细地分析一下过拟合产生的原因以及相应的解决办法. 过拟合产 ...

  7. SQL基础-建表

    一.建表 1.创建表的两种方式 *客户端工具 *SQL语句 2.使用SQL语句创建表 表名和字段名不能使用中文:(一般为字母开头,字母.数字.下划线组成的字符串): CREATE TABLE关键字后跟 ...

  8. Java-根据经纬度计算距离(百度地图距离)

    最近碰到一个需求,需要根据两个点的经纬度查询两点的距离.感觉以后还会用到,所以小记一波. 第一步:添加Maven依赖. <dependency> <groupId>org.ga ...

  9. nginx重启 平滑重启

    进入 ngiinx sbin目录下./nginx -c /usr/local/nginx/conf/nginx.conf -c参数指定了要加载的nginx配置文件路径 停止操作停止操作是通过向ngin ...

  10. Centos 7配置nginx反向代理负载均衡集群

    一,实验介绍 利用三台centos7虚拟机搭建简单的nginx反向代理负载集群, 三台虚拟机地址及功能介绍 192.168.2.76    nginx负载均衡器 192.168.2.82    web ...