javascript - 显示加载程序直到整个页面在 asp.net 中完全加载

Question

我有 gridview，其中有 700 行。我已将 ajax 加载器放在页面上，如 link 所示。 。当还有 2-3 分钟完全加载数据时，加载程序消失。我想显示加载程序直到页面完全加载。我怎样才能实现这个目标？

<script type="text/javascript">
              function ShowProgress() {

                  setTimeout(function () {
                      var modal = $('<div />');
                      modal.addClass("modal");
                      $('body').append(modal);
                      var loading = $(".loading");
                      loading.show();
                      var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
                      var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
                      loading.css({ top: top, left: left });
                  }, 1000);
              }

              $(document).ready(function () {
                  $('#Button1').click(function () {
                      ShowProgress();
                  });
              });
          </script>
<style type="text/css">
    .modal
    {
        position: fixed;
        top: 0;
        left: 0;
        background-color: black;
        z-index: 99;
        opacity: 0.8;
        filter: alpha(opacity=80);
        -moz-opacity: 0.8;
        min-height: 100%;
        width: 100%;
    }

    .loading
    {
        font-family: Arial;
        font-size: 10pt;
        border: 5px solid #67CFF5;
        width: 200px;
        height: 100px;
        display: none;
        position: fixed;
        background-color: White;
        z-index: 999;
    }

</style>
<div class="loading" align="center">
    Loading. Please wait.<br />
    <br />
    <img src="loader.gif" alt="" />

</div>

Answer 1

在发送ajax请求之前调用加载器函数，并在收到响应后隐藏加载器，或者在您的情况下数据绑定(bind)到gridview。

displayLoader();
    $.ajax({
        type: "POST",
        contentType: "application/json",
        url: url
    }).done(function (data) {
        //call is successful
        hideLoader();
    }).fail(function () {
        //call has failed
        hideLoader();
    }).always(function () {
        //always execute despite failure/success
        hideLoader();
    });