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

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. 决策树——C4.5

    -- coding: utf-8 -- """ Created on Thu Aug 2 17:09:34 2018 决策树ID3,C4.5的实现 @author: we ...

  2. [NPM + React] Prepare a Custom React Hook to be Published as an npm Package

    Before we publish our package, we want to make sure everything is set up correctly. We’ll cover vers ...

  3. Mycat 全局系列号(转载)

    概述 本篇文章介绍mycat怎样在分库分表的情况下保证主键的全局唯一方法,接下来就来分析三种方法各自的优缺点. 配置 文件方式获取 1.修改server配置文件 vim server.xml < ...

  4. 微信小程序路由带参

    通过url带参传递 wxml <navigator url="../user/user?id={{item.id}}&name={{item.name}}">点 ...

  5. learning java 重定向标准输入输出

    output redirectionOut: public class RedirectOut { public static void main(String[] args) throws File ...

  6. hibernateHQL语句

    一.hql 1. 什么是hql HQL是Hibernate Query Language的缩写 查全部 2. hql和sql区别/异同 HQL SQL 类名/属性 表名/列名 区分大小写,关键字不区分 ...

  7. CTS&&APIO2019爆零记

    如果你只好奇测试相关请跳至day 2 day 3 day 6 scoi 2019 之后 ​ 由于实力问题,省选的时候排名在三十多,显然是没有进队.不过可能是受过的打击比较多,所以还没有特别颓废,甚至连 ...

  8. 堆排序Heapsort的Java和C代码

    Heapsort排序思路 将整个数组看作一个二叉树heap, 下标0为堆顶层, 下标1, 2为次顶层, 然后每层就是"3,4,5,6", "7, 8, 9, 10, 11 ...

  9. 000 okhttp3的Get使用

    一:概述 1.说明 java与android都可以使用. 是网络请求的开源框架. square公司开发,用于替代HttpUrlConnection和Apache  HttpClient 2.优点 支持 ...

  10. EOS require_auth函数

    action的结构 要说清楚这个方法的含义和用法,咱们需要从action的结构说起.详见eoslib.hpp中的action类,这里把它的结构简化表示成下面这样: * struct action { ...