Jquery 在ASP.NETMVC中调用Action方法时在页面中心显示加载动画

我的应用程序多次调用返回Json对象的操作方法（ASP.NETMVC）。当应用程序等待此方法返回其数据时，我希望在页面中心显示加载动画。我将如何做到这一点？我知道我应该使用JQuery，但这就是我所知道的。

您可以通过在请求之前显示一个div（如果您想以一种模式的方式执行它，您可以使用-或者其他许多模式对话框插件之一）来实现这一点，然后等待回调成功，作为一个快速示例，您可以使用$.getJSON，如下所示（如果要添加正确的错误处理，可能需要使用.ajax）

如果您在应用程序中多次执行此操作，并且希望集中所有ajax调用的行为，则可以使用全局ajax事件：-

$("#ajaxLoader").ajaxStart(function() { $(this).show(); })
               .ajaxStop(function() { $(this).hide(); });

---

使用blockUI与此类似，例如标记如下：-

<a href="/Path/ToYourJson/Action" id="jsonLink">Get JSON</a>
<div id="resultContainer" style="display:none">
And the answer is:-
    <p id="result"></p>
</div>

<div id="ajaxLoader" style="display:none">
    <h2>Please wait</h2>
    <p>I'm getting my AJAX on!</p>
</div>

---

我在Site.Master中定义了两个功能：

    <script type="text/javascript">
    var spinnerVisible = false;
    function showProgress() {
        if (!spinnerVisible) {
            $("div#spinner").fadeIn("fast");
            spinnerVisible = true;
        }
    };
    function hideProgress() {
        if (spinnerVisible) {
            var spinner = $("div#spinner");
            spinner.stop();
            spinner.fadeOut("fast");
            spinnerVisible = false;
        }
    };
</script>

---

这就是它的魅力所在

CSS

---

在body标记内但容器div外的布局文件中。每次加载页面时，它都显示加载。加载页面后，JS淡出（秒）

---

---

JS位于_布局文件的底部

---

//初始显示元素后，我们可以慢慢隐藏它：
$（“#加载器”）.fadeOut（1000）；

另一个类似于此处已公开的解决方案是此解决方案。就在结束正文标记放置此html之前：

<div id="resultLoading" style="display: none; width: 100%; height: 100%; position: fixed; z-index: 10000; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: auto;">
    <div style="width: 340px; height: 200px; text-align: center; position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: auto; z-index: 10; color: rgb(255, 255, 255);">
        <div class="uil-default-css">
            <img src="/images/loading-animation1.gif" style="max-width: 150px; max-height: 150px; display: block; margin-left: auto; margin-right: auto;" />
        </div>
        <div class="loader-text" style="display: block; font-size: 18px; font-weight: 300;">&nbsp;</div>
    </div>
    <div style="background: rgb(0, 0, 0); opacity: 0.6; width: 100%; height: 100%; position: absolute; top: 0px;"></div>
</div>

这可以应用于任何使用jQuery的基于html的项目，如果您不知道管理区域中的哪些页面需要很长时间才能完成加载

gif图像为176x176px，但您可以使用任何透明gif动画，请考虑图像大小不重要，因为它将最大化为150x150px

---

此外，可以在元素单击时调用函数showLoader，以执行进一步重定向页面的操作，这就是为什么它提供了一个单独的函数。我希望这也能帮助任何人。

您能解释一下调用这些javascript函数的位置吗？这些javascript函数可以在Ajax调用中调用。showP可以在Ajaxcall启动时调用rogress（），并且可以在Ajaxcall的完整函数或成功/错误函数中调用hideProgress（）。投票支持此函数，因为它更全面，结构更好。很好！

    <script type="text/javascript">
    var spinnerVisible = false;
    function showProgress() {
        if (!spinnerVisible) {
            $("div#spinner").fadeIn("fast");
            spinnerVisible = true;
        }
    };
    function hideProgress() {
        if (spinnerVisible) {
            var spinner = $("div#spinner");
            spinner.stop();
            spinner.fadeOut("fast");
            spinnerVisible = false;
        }
    };
</script>

    <div id="spinner">
        Loading...
    </div>

div#spinner
{
    display: none;
    width:100px;
    height: 100px;
    position: fixed;
    top: 50%;
    left: 50%;
    background:url(spinner.gif) no-repeat center #fff;
    text-align:center;
    padding:10px;
    font:normal 16px Tahoma, Geneva, sans-serif;
    border:1px solid #666;
    margin-left: -50px;
    margin-top: -50px;
    z-index:2;
    overflow: auto;
}

#loader {
position:fixed;
left:1px;
top:1px;
width: 100%;
height: 100%;
z-index: 9999;

background: url('../images/ajax-loader100X100.gif') 50% 50% no-repeat rgb(249,249,249);
}  

<div id="loader">
</div>

<script type="text/javascript">
// With the element initially shown, we can hide it slowly:
 $("#loader").fadeOut(1000);
</script>  

<div id="resultLoading" style="display: none; width: 100%; height: 100%; position: fixed; z-index: 10000; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: auto;">
    <div style="width: 340px; height: 200px; text-align: center; position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: auto; z-index: 10; color: rgb(255, 255, 255);">
        <div class="uil-default-css">
            <img src="/images/loading-animation1.gif" style="max-width: 150px; max-height: 150px; display: block; margin-left: auto; margin-right: auto;" />
        </div>
        <div class="loader-text" style="display: block; font-size: 18px; font-weight: 300;">&nbsp;</div>
    </div>
    <div style="background: rgb(0, 0, 0); opacity: 0.6; width: 100%; height: 100%; position: absolute; top: 0px;"></div>
</div>

var showLoader = function (text) {
    $('#resultLoading').show();
    $('#resultLoading').find('.loader-text').html(text);
};

jQuery(document).ready(function () {
    jQuery(window).on("beforeunload ", function () {
        showLoader('Loading, please wait...');
    });
});