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

我有一个gridview，其中有700行。我将ajax加载程序放在页面上，如图所示。当还有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>

函数ShowProgress（）{
setTimeout（函数（）{
var模态=$（''）；
modal.addClass（“modal”）；
$（'body'）。附加（模态）；
变量加载=$（“.loading”）；
loading.show（）；
var top=Math.max（$（window.height（）/2-load[0].offsetHeight/2,0）；
var left=Math.max（$（窗口）.width（）/2-正在加载[0].offsetWidth/2,0）；
正在加载.css（{top:top，left:left}）；
}, 1000);
}
$（文档）.ready（函数（）{
$（'#按钮1'）。单击（函数（）{
ShowProgress（）；
});
});
情态动词
{
位置：固定；
排名：0；
左：0；
背景色：黑色；
z指数：99；
不透明度：0.8；
过滤器：α（不透明度=80）；
-moz不透明度：0.8；
最小高度：100%；
宽度：100%；
}
.装货
{
字体系列：Arial；
字号：10pt；
边框：5px实心#67CFF5；
宽度：200px；
高度：100px；
显示：无；
位置：固定；
背景色：白色；
z指数：999；
}
加载。请稍候。

在发送ajax请求之前调用loader函数，并在收到响应或将数据绑定到gridview后隐藏loader

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();
    });

---

那么，完全加载这些行需要5-7分钟？为什么不先用ajax创建一个分页呢？无论如何，试试这个：

$.ajax({
  type: 'POST',
  url: "yourUrl",
  contentType: "application/json",
  context: document.body
  }).done(function() {
    $(".loading").hide();
  });

---

使用

.done

函数没有ajax调用。加载程序显示在客户端的按钮单击事件上。那么网格的数据是如何填充的？您如何知道网格数据已成功绑定？你用的是什么网格？您可以使用网格绑定事件来删除加载。您应该只在

中调用
hideLoader（）
。始终（）

事件，因为无论Ajax调用完成或失败，始终都会调用always。没有Ajax调用。客户端的按钮单击事件上会显示加载程序。我已将实际代码粘贴到我的question@priyathapliyal,那你为什么给阿贾克斯贴标签呢？我很抱歉。。这是个错误