如何在加载数据的时候给一个等待动画

有时候我们的数据是比较大的,在查询的时候加载很慢,那么为了友好的提示,于是想到了给一个等待的界面,让用户知道这个正在加载中。话不多说了,直接上代码:

js代码:

<script type="text/javascript">
        jQuery(window).load(function () {
            //            "use strict";
            //            // Page Preloader
            jQuery(‘#preloader‘).delay(350).fadeOut(function () {
                jQuery(‘body‘).delay(350).css({ ‘overflow‘: ‘visible‘ });
            });
        });

</script>

样式:

<style type="text/css">
        /* preloader */
        #preloader
        {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #e4e7ea;
            z-index: 10000;
        }
        
        #status
        {
            width: 120px;
            height: 40px;
            line-height: 40px;
            position: absolute;
            left: 47%;
            top: 40%;
            font-size: 12pt;
            font-family: 宋体;
        }
        #status span
        {
            float: right;
        }
    </style>

HTML代码如下:

<%--加载时的提示图片--%>
    <div id="preloader">
        <div id="status">
            <img src="../../dong.gif" width="40" height="40" /><span>数据加载中...</span>
        </div>
    </div>
    <%----%>

<div>

<%--这里放的时候你的数据,比如你用的GridView啊,或者DataList啊绑定数据的控件--%>

</div>

时间: 2024-08-05 04:35:37

如何在加载数据的时候给一个等待动画的相关文章

Loader异步加载数据

在android3.0开始,新增了Loader.  Loader加载数据的方式是异步的.Loader的特点: 1.适合于activity和fragment 2.提供了异步加载数据机制 3.监控数据源,当数据源发生改变时,会传递新结果 4.自动重连到最后一个数据加载器游标,不需要重新查询数据 使用情况:对数据源监控,比如contentProvider.     CursorLoader是AsyncTaskLoader的子类,AsyncTaskLoader会提供AsynTask去操作.故不会阻塞UI

asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)

自从腾讯微博上线以来,基本上就开始用了,一直到现在,作为一个开发人员,也看到了腾讯微博一直在不停的改变,也不知道大家有没有发现,腾讯微博提供两种加载数据的方式,一种是分页,一种是滚动浏览器滚动条加载数据,分页功能我想大家都做得太多了,今天我与大家分享一下我用滚动条滚动加载数据,小生不才,还望各位大侠指教,呵呵~ 下面开讲: 首先说一下思路,我用的是Jquery,然后通过Jquery的ajax()方法通过 HTTP 请求加载远程数据来实现的,用到Jquery,首先要应用jquery.min.js类

Spring Boot 启动加载数据 CommandLineRunner

实际应用中,我们会有在项目服务启动的时候就去加载一些数据或做一些事情这样的需求. 为了解决这样的问题,spring Boot 为我们提供了一个方法,通过实现接口 CommandLineRunner 来实现. 很简单,只需要一个类就可以,无需其他配置. 创建实现接口 CommandLineRunner 的类 Spring Boot应用程序在启动后,会遍历CommandLineRunner接口的实例并运行它们的run方法.也可以利用@Order注解(或者实现Order接口)来规定所有CommandL

【重大bug】viewpager使用的时候加载数据应该在setOnPageChangeListener里加载

[重大bug]viewpager使用的时候加载数据应该在setOnPageChangeListener里的onPageSelected里加载,我说怎么首页有数据,第二页就是空白,就是加载了但是数据不显示 1 mPagerTab.setOnPageChangeListener(new OnPageChangeListener() { 2 3 @Override 4 public void onPageSelected(int position) { 5 BaseFragment fragment

viewPager使用时加载数据时显示IllegalStateException异常,解决不了。。。。

从newsPager中得到newsDetailTitles标题的详细内容,这是通过构造器传过来的.打印日志78行能打印,45行打印出来共size是12.但是程序出现了异常java.lang.IllegalStateException: The application's PagerAdapter changed the adapter's contents without calling PagerAdapter#notifyDataSetChanged. 从网上查询的结果是adapter中的数

数据模型的构建及懒加载数据

1.数据模型的构建 #import <Foundation/Foundation.h> @interface AppModel : NSObject @property (nonatomic, strong) NSString *icon; @property (nonatomic, strong) NSString *name; - (instancetype)initWithDict:(NSDictionary *)dict; + (instancetype)appModelWithDic

iScroll.js 向上滑动异步加载数据回弹问题

iScroll是一款用于移动设备web开发的一款插件.像缩放.下拉刷新.滑动切换等移动应用上常见的一些效果都可以轻松实现. 现在最新版本是5.X,官网这里:http://iscrolljs.com/ 下面是按照官网给的Demo,写的一个异步加载数据实例: 1 <title>iScroll demo: click</title> 2 <script src="~/Scripts/iscroll5/jquery-1.10.2.js"></scrip

(转帖)关于easyui中的datagrid在加载数据时候报错:无法获取属性&quot;Length&quot;的值,对象为null或未定义

结贴说明: 很感谢sp1234等人的热心帮忙和提醒,现在我主要说明下问题所在: 首先我在独立的js文件中,直接把测试数据loaddata进去datagrid是没有问题的.var kk = {"total":2,"rows":[{"INSTANCE_ID":"BI00000011","BUSINESS_NAME":"专项检查文档资料报送","INSTANCE_STATUS&quo

SpringMVC+Jquery -页面异步加载数据

背景: 做项目时涉及到页面,当我打算在controller中传一个list到页面,然后通过<c:foreach>循环遍历出来时,同事说:你这样每次都要刷新,这都是几百年前使用的技术了.你用post实现异步加载数据.然后就...... ResultUtil.java 工具类: package com.sgcc.uds.fs.config.web.util; import java.util.HashMap; import java.util.Map; import net.sf.json.JSO