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

来源：互联网发布：中国汽车进出口数据编辑：程序博客网时间：2024/05/17 15:19

继续上一节的话题，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";}

0 0