.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 »</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 »</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 »</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 »</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";
}