zoukankan html css js c++ java

数据为返回时，页面加载更多效果

很多时候我们获取后台数据时页面在为返回任何数据时，给用户的体验效果并不好，一般都是给页面天一个效果，如下图：

当数据完全返回时，再让它消失，那么是怎么做的呢？直接上代码。。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <style>
            .foruser{
                        position: relative;
                    }
                    .yb-zhezhao{
                        position: absolute;
                        left:0;
                        top:0;
                        width: 100%;
                        height:100%;
                        line-height: 100%;
                        background: #fff;
                        text-align: center;
                    }
                    .yb-zhezhao i{
                        margin-top: 1.5rem;
                    }
                    .con{
                        width: 100%;
                        height: 500px;
                    }
        </style>
    </head>

    <body>
        <div class="foruser">
            <div class="yb-zhezhao">
                <i class="fa fa-spinner fa-spin fa-3x fa-fw margin-bottom"></i>
                <span>加载中...</span>
            </div>
            <div class="con"></div>
        </div>
        <script src="jquery.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            loading();
             //loading
            function loading() {
                    $.ajax({
                        url: 'http://api.jtzk.com/api/Base/GetNewsAdvertisement',
                        type: 'POST',
                        async: false,
                        data: {
                            "TopNum": 5,
                            "Token": "B926E78B1A214CF193EF544ADF808251",
                        },
                        success: function(response) {
                            if (response.Result == 200) {
                                //接口调取成功，关闭浮动层
                                _loading();
                            };
                        },
                        error: function(e) {
                            console.log('error');
                        }
                    });
                }
                //关闭loading

            function _loading() {
                $(".yb-zhezhao").hide();
            }
        </script>
    </body>

</html>

样式是引得图标库里的，ajax 当然要改成自己的，还有别忘了引jq,嗯，没啦，so easy~

查看全文

相关阅读:
CentOS 基本设置
 CentOS 7 编译安装 Code::Blocks
Java和C/C++进行DES/AES密文传输（借鉴）
VS 2010 编译 Openssl
Crypto++ 动态链接编译与实例测试
 c++11-bind的用法
 模板编程-迭代器
 LeetCode-Swap Nodes in Pairs
LeetCode-Generate Parentheses
Leetcode-Letter Combinations of a Phone Number

原文地址：https://www.cnblogs.com/lichunjing/p/7066130.html