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

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

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;
            100%;
            height: 100%;
            background-color: #e4e7ea;
            z-index: 10000;
        }
        
        #status
        {
            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>

原文地址:https://www.cnblogs.com/LoveQin/p/4675394.html