页面加载时loading效果：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <style>
  6.         #loading{position:fixed;top:0;left:0;width:100%;height:100%;opacity:0.6;z-index:15000;}
  7.         #loading img{position:absolute;top:50%;left:50%;width:60px;height:60px;margin-top:-30px;margin-left:-30px;background: white;}
  8.     </style>
  9.     <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
  10. </head>
  11. <body>
  12. <script type="text/javascript">
  13.     $(function() {
  14.         var loading = '<div id="loading"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1504002746731&di=a7d82714e2b6a150ecb6ab45d2dc73b9&imgtype=0&src=http%3A%2F%2Falcastongallery.com.au%2Fassets%2Fimages%2Fajax-loader.gif"></div>';
  15.         $('body').append($(loading));
  16.  
  17.         setTimeout(function () {
  18.             $('#loading').remove();
  19.         }, 3000);
  20.     });
  21.  
  22. </script>
  23. </body>
  24. </html>

页面加载时loading效果的更多相关文章

  1. JQuery+CSS3实现Ajax加载时loading效果

    之前通过Ajax请求加载数据的时候,在数据还没有呈现出来前,为了更好的用户体验,总会弄个loading告诉用户其实内容正在加载,而不是网站崩了.但是貌似之前使用gif图片的情况比较多,可能是为了兼容各 ...

  2. fakeLoader页面加载前loading演示8种效果

    提高用户体验的插件fakeLoader页面加载前loading演示8种效果 在线预览 下载地址 示例代码 <div id="main"> <div class=& ...

  3. ajax加载菊花loading效果

    Ajax异步请求的时候,一般都会利用一个动态的gif小图片来制作一个Ajax Loading,以便增加用户体验. 这里我们可以使用Spin.js,该js脚本压缩后5k,可以不用任何图片,任何外部CSS ...

  4. 页面加载时的div动画

    用@keyframes(动画),实现页面加载时的div动画(不要用js控制,因为当页面加载的时候,js还不一定可以使用) 可以在https://daneden.github.io/animate.cs ...

  5. 使用 v-cloak 防止页面加载时出现 vuejs 的变量名

    使用 vuejs 做了一个简单的功能页面,逻辑是,页面加载后获取当前的经纬度,然后通过 ajax 从后台拉取附近的小区列表.但是 bug 出现了,在显示小区列表之前,会闪现小区名对应的 vuejs 变 ...

  6. Javascript在页面加载时的执行顺序【转】

    一.在HTML中嵌入Javasript的方法 直接在Javascript代码放在标记对<script>和</script>之间 由<script />标记的src属 ...

  7. 解决JS文件页面加载时的阻塞

    关于页面加载时的时间消费,许多书中都做出了介绍,也提出了很多种方法.本文章就详细介绍XHR注入. 概述:JS分拆的方法 1.XHR注入:就是用ajax异步请求同域包含脚本的文件,然后将返回的字符串转化 ...

  8. ASP.NET中页面加载时文本框(texbox控件)内有文字获得焦点时文字消失

    代码如下: <asp:TextBox ID="TextBox1" runat="server" Height="26px" MaxLe ...

  9. 页面加载时，页面中DIV随之滑动出来；去掉页面滚动条

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

随机推荐

  1. CF555E Case of Computer Network

    题面:https://www.luogu.com.cn/problem/CF555E 题意:给定一张\(n\)个点\(m\)条边的无向图. 给定\(q\)组有向点对\((s,t)\). 询问是否存在使 ...

  2. Linux系统常用知识（centos7）

    一.查看系统版本 1.查看linux内核版本 #cat /etc/redhat-release 二.主机名 2.1定义: 静态的(Static hostname):“静态”主机名也称为内核主机名,是系 ...

  3. 通过URL方式动态修改logback level级别

    import org.slf4j.Logger; import org.slf4j.LoggerFactory; import ch.qos.logback.classic.Level; import ...

  4. tensorflow的boolean_mask函数

    在mask中定义true,保留与其进行运算的tensor里的部分内容,相当于投影的功能. mask与tensor的维度可以不相同的,但是对应的长度一定要相同,也就是要有一一对应的部分: 结果的维度 = ...

  5. json序列化反序列

    json只能处理简单的数据类型:字典 列表等... 文件只能存字符串和二进制 序列化:把内存的对象变为字符串 反序列化:将字符串变回为内存对象

  6. Linux 多个cpp文件的编译（Makefile）

    打包so文件: CC = g++ CFLAGS=-Wall -O2 -fPIC TARGET = libbg.so SRCS := $(wildcard *.cpp) OBJS := $(patsub ...

  7. Angular JS - 3 - Angular JS 双向数据绑定

    一 .数据绑定 1. 数据绑定: 数据从一个地方A转移(传递)到另一个地方B, 而且这个操作由框架来完成2. 双向数据绑定: 数据可以从View(视图层)流向Model(模型,也就是数据), 也可以从 ...

  8. CF 936C Lock Puzzle——构造

    题目:http://codeforces.com/contest/936/problem/C 玩了一个小时,只能想出 5*n 的方法. 经过一番观察?考虑这样构造:已经使得 A 串的一个后缀 = B ...

  9. Spring JDK动态代理

    1. 创建项目在 MyEclipse 中创建一个名称为 springDemo03 的 Web 项目,将 Spring 支持和依赖的 JAR 包复制到 Web 项目的 WEB-INF/lib 目录中,并 ...

  10. 使用mysql应该注意的细节

    一.表及字段的命名规范 1.可读性原则 使用大写和小写来格式化的库对象名字以获得良好的可读性. 例如:使用CustAdress而不是custaddress来提高可读性.(这里注意有些DBMS系统对表名 ...