页面加载时loading效果：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <style>

        #loading{position:fixed;top:0;left:0;width:100%;height:100%;opacity:0.6;z-index:15000;}

        #loading img{position:absolute;top:50%;left:50%;width:60px;height:60px;margin-top:-30px;margin-left:-30px;background: white;}

    </style>

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>

</head>

<body>

<script type="text/javascript">

    $(function() {

        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>';

        $('body').append($(loading));

        setTimeout(function () {

            $('#loading').remove();

        }, 3000);

    });

</script>

</body>

</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. 给mysql一百万条数据的表添加索引

    直接alter table add index 添加索引,执行一个小时没反应,并且会导致锁表:故放弃该办法,最终解决办法如下: 一.打开mysql 命令行客户端 这里我们那可以看到导出的数据文件所存放 ...

  2. C++ KMP文本匹配

    代码如下: 环境为VC #include <iostream> #include <algorithm> #include <string> #include &l ...

  3. [AtCoder] Yahoo Programming Contest 2019

    [AtCoder] Yahoo Programming Contest 2019   很遗憾错过了一场 AtCoder .听说这场是涨分场呢,于是特意来补一下题. A - Anti-Adjacency ...

  4. python 文件单行循环读取的坑（一个程序中，文件默认只能按行循环读取一次，即使写到另一个循环里，它也只读取一次）

    本来写了一个程序,想获取a文件中有,但是b文件中没有的行: 想到的方法是:1.一行一行提取a文件中数据,然后用a文件中的每一行与b文件中的每一行比较, 2.如果找到相同行就继续查找a中的下一行,如果找 ...

  5. grep正则表达式（一）

    新建一批 txt 文件: [me@linuxbox ~]$ ls /bin > dirlist-bin.txt [me@linuxbox ~]$ ls /usr/bin > dirlist ...

  6. 【和孩子一起学编程】 python笔记--第五天

    关于python2在python3中的改动: https://mp.weixin.qq.com/mp/appmsg/show?__biz=MjM5MDEyMDk4Mw==&appmsgid=1 ...

  7. javascript中new关键字详解

    和其他高级语言一样 javascript 中也有 new 运算符,我们知道 new 运算符是用来实例化一个类,从而在内存中分配一个实例对象. 但在 javascript 中,万物皆对象,为什么还要通过 ...

  8. dumpsys, traceView调试命令

    1. dumpsys dumpsys cpuinfo: 打印cpu使用情况: dumpsys meminfo: 打印内存使用率情况: dumpsys activity: 打印所有活动的信息: dump ...

  9. AcWing 313. 花店橱窗 （线性DP）打卡

    题目:https://www.acwing.com/problem/content/315/ 题意:有一个矩阵,你需要在每一行选择一个数,必须保证前一行的数的下标选择在下一行的左边,即下标有单调性,然 ...

  10. [CSP-S模拟测试]:antipalindrome（数学）

    题目传送门(内部题58) 输入格式 第一行一个数$T$表示数据组数.接下来每行两个数$n$和$m$. 输出格式 $T$行,每行一个答案,对${10}^9+7$取模. 样例 样例输入: 25 66 5 ...