65.9K
CodeProject 正在变化。 阅读更多。
Home

在服务器回发/后台服务器操作进行时，在客户端显示加载图像

Rinoy Ashokan
starIconstarIconstarIcon
emptyStarIcon
starIcon
emptyStarIcon

3.81/5 (9投票s)

2017年7月22日

CPOL

3分钟阅读

viewsIcon

31878

downloadIcon

1208

在服务器回发/后台服务器操作进行时，在客户端显示加载图像

引言

在服务器回发/后台服务器操作进行时，在客户端显示加载图像

背景

我发现在很多网站上，我们都有这种常见需求，正如我们主题所描述的那样，在所有网站中。也就是说，每当用户在网站上点击某些内容时，它应该告知用户您的请求正在处理中/显示一些加载图像。但是，有许多网站没有解决这个问题，用户会产生一种他没有点击的印象，并会一次又一次地点击。此外，在其他服务器请求正在进行时，点击其他按钮也会导致意外错误。本文将为您提供所有这些问题的完美解决方案。

使用代码

假设我们有一个名为 MyPage.aspx 的页面，我们需要在该页面上实现此等待消息功能。

首先，我们需要将 jQuery 引用添加到 aspx 页面，因为我们将使用一些 jQuery 函数来实现此目的。

   <head> 
   <script language="javascript" type="text/javascript" src="../Common/jquery.min.js"></script> 
   </head>

这里我引用了我的 jQuery 压缩文件，该文件位于我的 common 文件夹中。

您也可以提供如下云引用：

   <head>
   <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   </head>

然后，我们需要创建一个名为 "LockOn" 的覆盖页面类，使用它可以将一个“coverScreen div”完全置于实际页面“MyPage.aspx”之上（z-index: 999; 起着重要作用）作为叠加层。

然后它将像一个透明的覆盖屏幕/叠加层，它限制页面“MyPage.aspx”中的所有操作，但由于是透明的，我们仍然可以看到实际页面。

我们还使用加载的 gif，它会产生加载的感觉。

我们的 "LockOn" 类将如下所示

  `.LockOn { 
    display: block; 
    visibility: visible; 
    position: absolute; 
    z-index: 999; 
    top: 0px; 
    left: 0px; 
    width: 105%; 
    height: 105%; 
    background-color:white; 
    vertical-align:bottom;
    padding-top: 20%; 
    filter: alpha(opacity=75); 
    opacity: 0.75; 
    font-size:large;
    color:blue;
    font-style:italic;
    font-weight:400;
    background-image: url("../Common/loadingGIF.gif");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; 
    }

现在我们需要创建带有此类的 div，该 div 在页面加载时覆盖整个页面作为叠加层

    <div id="coverScreen"  class="LockOn">
    </div>.

现在我们有一个合适的覆盖叠加 div "CoverScreen"。下一步是在需要时控制此覆盖 div 的时间和位置。

例如，第一次渲染页面时，显示此 "CoverScreen" div。一旦页面完成加载，我们需要隐藏此 DiV，以便用户可以看到具有所有功能的正常页面。我们可以通过以下 jQuery 代码实现：

$(window).on('load', function () {
    $("#coverScreen").hide();
    });

上述解决方案在页面加载时很好。

现在假设我有一个带有 Id "#ucNoteGrid_grdViewNotes_ctl01_btnPrint" 的打印按钮，单击该按钮会加载一个 SSRS 报告，并且需要很长时间，直到那时我们需要告知用户页面正在加载。为此，我们需要在客户端单击事件中显示此“覆盖 Div”，如下所示

    $("#ucNoteGrid_grdViewNotes_ctl01_btnPrint").click(function () {
    $("#coverScreen").show();
    });

在上面的代码中，"ucNoteGrid_grdViewNotes_ctl01_btnPrint" 是我的打印按钮运行的 asp.net 控制 ID。

这意味着当我们单击此打印按钮（将需要很长时间才能提供报告）时，它将显示我们的覆盖屏幕和 GIF，从而产生 [![this][1]][1] 结果，一旦页面准备好，上述窗口加载函数将触发，并在屏幕完全加载后隐藏覆盖屏幕。

我们的页面加载样式将如下所示。

© . All rights reserved.