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

html代码如下

<!--页面载入显示-->
<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;">
<table width=100% height=100% border=0 align=center>
<tr>
<td align=center>
<img height="50" src="./image/loading.gif" />
</td>
<td align="left">
<span style="font-weight: 900; color: #0394c3;">
数据载入中,请稍后......
</span>
</td>
</tr>
</table>
</div>

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

$("#dataLoad").hide(); //页面数据加载完毕后即将DIV隐藏
$("#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. Parametric and Nonparametric Algorithms

    即参数化算法和非参数化算法. 参数化机器学习算法 可以大大简化学习过程,也可以限制可以学到的东西,将函数简化为已知形式的算法称为参数化机器学习算法.算法包括两个步骤: 为函数选择一个form. 从训练 ...

  2. globing通配符

    匹配标点符号 linux中只要不含有/的文件就可以生成,所以标点符号也是符合要求的 匹配空白 使用\对空白进行转义,这样就可以生成包含空格名称的文件 但是不推荐这样用,容易让别人在使用的时候造成误解 ...

  3. Python 09 安装torch、torchvision

    这个也是弄了我很久,百度了好多文章,其实像下面那样挺简单的,没那么复杂 1.进入torch的官网的下载页面,选择一下参数信息 地址:https://pytorch.org/get-started/lo ...

  4. 洛谷 P5506 封锁

    目录 题目 思路 \(Code\) 题目 P5506 封锁 思路 模拟 \(\large\text{读题一定要细心}\) 解释都在代码里. \(Code\) #include<bits/stdc ...

  5. mysql 显示表结构

    例子 mysql> show columns from table1; +------------+------------------+------+-----+---------+----- ...

  6. nRF51822 Beacon 扫描请求包的设置

    Nordic 公司自己做有 iBeacon的板子和 SDK,很少有人拥有这个SDK,我最近在朋友那也拿到了一个,但是还没有时间看. 现在我们用普通的SDK自带的 Beacon 例程来做开发,开发的时相 ...

  7. 使用python3完成人脸识别

    原文地址:https://www.jb51.net/article/160197.htm 第一种: # -*- coding:utf-8 -*- import cv2 as cv import num ...

  8. Linux crontab命令:循环执行定时任务(详解版)

    前面学习了 at 命令,此命令在指定的时间仅能执行一次任务,但在实际工作中,系统的定时任务一般是需要重复执行的.而 at 命令显然无法满足需求,这是就需要使用 crontab 命令来执行循环定时任务. ...

  9. Pycharm使用git版本控制

    一.使用Pycharm进行版本控制 01 从远程仓库克隆项目 从远程仓库将一个已存在的项目克隆到本地 打开pycharm, VCS --> Checkout from Version Contr ...

  10. [RoarCTF]Easy Java

    目录 [RoarCTF]Easy Java 知识点 1.WEB-INF/web.xml泄露 [RoarCTF]Easy Java 题目复现链接:https://buuoj.cn/challenges ...