.net MVC框架下利用CSS+js实现loading效果

继续上一节的话题，http://blog.csdn.net/luanzheng_365/article/details/70348382 动态刷新过程往往需要较多的时间，这期间需要做一个loading的效果，来增强用户体验。

先看以下程序运行效果：可以看到在数据未呈现出来时，页面产生了loading效果，在数据获取到之后，数据展示的同时，loading消失。
这里写图片描述

在上一节代码的基础之上，增加loading效果部分用注释特别标注出来。
HTML页面部分：

@{
    ViewBag.Title = "Home Page";
}



<div class="jumbotron">
    <h1>ASP.NET</h1>
    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
    <p><a href="http://asp.net" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
</div>

<div class="row">
    <div class="col-md-4">
        <h2>Getting started</h2>
        <p>
            ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
            enables a clean separation of concerns and gives you full control over markup
            for enjoyable, agile development.
        </p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-4">
        <h2>Get more libraries</h2>
        <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-4">
        <h2>Web Hosting</h2>
        <p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301867">Learn more &raquo;</a></p>
    </div>
</div>

<input id="ID" type="text" size="15" />
<input id="NAME" type="text" size="15" />
<input id="MOBILE" type="text" size="15" />



<!--增加如下显示loading效果的代码-->
<link rel="stylesheet" type="text/css" href="~/Content/css/loading.css">
<div class="loadEffect" id="loading">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>
<!--增加以上显示loading效果的代码-->

<script type="text/javascript" src="~/Content/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="~/Content/js/getUserInfo.js"></script>
<script>
    getUserInfo();
</script>

CSS部分：

.loadEffect {
    width: 100px;
    height: 100px;
    position: relative;
    margin: 0 auto;
    margin-top: 100px;
    display: none;
}

    .loadEffect span {
        display: inline-block;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: lightgreen;
        position: absolute;
        -webkit-animation: load 1.04s ease infinite;
    }

@-webkit-keyframes load {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0.2;
    }
}

.loadEffect span:nth-child(1) {
    left: 0;
    top: 50%;
    margin-top: -8px;
    -webkit-animation-delay: 0.13s;
}

.loadEffect span:nth-child(2) {
    left: 14px;
    top: 14px;
    -webkit-animation-delay: 0.26s;
}

.loadEffect span:nth-child(3) {
    left: 50%;
    top: 0;
    margin-left: -8px;
    -webkit-animation-delay: 0.39s;
}

.loadEffect span:nth-child(4) {
    top: 14px;
    right: 14px;
    -webkit-animation-delay: 0.52s;
}

.loadEffect span:nth-child(5) {
    right: 0;
    top: 50%;
    margin-top: -8px;
    -webkit-animation-delay: 0.65s;
}

.loadEffect span:nth-child(6) {
    right: 14px;
    bottom: 14px;
    -webkit-animation-delay: 0.78s;
}

.loadEffect span:nth-child(7) {
    bottom: 0;
    left: 50%;
    margin-left: -8px;
    -webkit-animation-delay: 0.91s;
}

.loadEffect span:nth-child(8) {
    bottom: 14px;
    left: 14px;
    -webkit-animation-delay: 1.04s;
}

JS部分：主要是增加了showLoading和hideLoading两个方法。在适合的地方进行调用，来完成loading效果的展示与隐藏。

function getUserInfo() {
    showLoading();
    //alert('Test')
    $.ajax({
        url: "/Home/GetUserInfo",  //ajax请求地址
        type: "POST",//请求方式 "POST" 或 "GET"， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
        dataType: "json",    //根据返回数据类型可以有这些类型可选：xml html script json jsonp text
        //发送到服务器的数据，可以直接传对象{a:0,b:1}，如果是get请求会自动拼接到url后面，如：&a=0&b=1
        //如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 "&foo=bar1&foo=bar2"。
        data: {id: "22"},
        success: function (result) {
            //this 调用本次AJAX请求时传递的options参数 ,如果设置context来改变了this，那这里的this就是改变过的
            if (result.IsSuccess == "1") {
                //alert(result.userInfo.UserId);
                //alert(result.userInfo.UserName);
                //alert(result.userInfo.Mobile);
                var textId = $("#ID");
                var textId2 = $("#NAME");
                var textId3 = $("#MOBILE");
                textId.val(result.userInfo.UserId);
                textId2.val(result.userInfo.UserName);
                textId3.val(result.userInfo.Mobile);
                hideLoading();
                //document.getElementById("ID") = result.userInfo.UserId;
                //document.getElementById("NAME").textContent = result.userInfo.UserName;
                //document.getElementById("MOBILE").textContent = result.userInfo.Mobile;
            } else {
                alert("The result is failed!");
                hideLoading();
            }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert("系统繁忙,请稍候");
            hideLoading();
        },
        //请求完成后回调函数 (请求成功或失败之后均调用)。参数： XMLHttpRequest 对象和一个描述成功请求类型的字符串
        complete: function (XMLHttpRequest, textStatus) {
            //this 调用本次AJAX请求时传递的options参数
            hideLoading();
        },
        //一组数值的HTTP代码和函数对象，当响应时调用了相应的代码。例如，如果响应状态是404，将触发以下警报：
        statusCode: {
            404: function () {
                alert('404，页面不存在');
                hideLoading();
            }
        }
    });
}

function showLoading() {
    var i = document.getElementById("loading");
    i.style.display = "block";
}

function hideLoading() {
    var i = document.getElementById("loading");
    i.style.display = "none";
}

.net MVC框架下利用CSS+js实现loading效果

悦读