如何在数据加载时创建页面覆盖 - asp.net/jquery/blockui答案

【问题标题】：How to create page overlay while data is loading - asp.net/jquery/blockui如何在数据加载时创建页面覆盖 - asp.net/jquery/blockui
【发布时间】：2011-12-15 15:27:03
【问题描述】：

我正在尝试在从 sql 服务器检索数据时显示“页面加载...请稍候”的叠加层。我希望为此使用 BlockUI 插件，但任何事情都可以。我有一个使用 site.master 的 ASP.NET 页面。该插件有效，但无论我尝试什么，它只会在页面完全加载后出现。

大部分等待都归结为在 Global.asax 文件中完成的工作。在 Session_Start 部分中，我有一个函数可以返回数据以填充页面上的下拉菜单。这大约需要 20 秒才能完成。

那么，我需要做什么才能在页面完全加载之前查看叠加层？感谢您的帮助或建议。

【问题讨论】：

标签： jquery asp.net overlay blockui

【解决方案1】：

对于加载页面，插件无法解决问题

如果您希望页面在加载之前被阻止，content blocker 元素应该是页面的一部分，而不是由始终在页面加载后运行的任何插件生成。在某个时间点或其他时间点。

<body>
   ...
   <!-- make it last -->
   <div id="blocker">
       <div>Loading...</div>
   </div>
</body>

让 CSS 完成剩下的工作

#blocker
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .5;
    background-color: #000;
    z-index: 1000;
}
    #blocker div
    {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 5em;
        height: 2em;
        margin: -1em 0 0 -2.5em;
        color: #fff;
        font-weight: bold;
    }

以及清除阻塞的 Javascript：

$(function(){
    $("#blocker").hide();
});

这是使用上述代码的working example。它会在超时时删除阻止程序，因为它是一个如此简单的文档。

重要提示

但也许你没有正确理解这一点。也许您想在现有页面回发到服务器时阻止它，因为那是另一回事。在这种情况下，您的插件应该足够了，并且应该在 unload 窗口事件和显示阻止元素上运行。这将在现有页面回发数据时以及在浏览器开始接收新内容之前阻止现有页面（可以使用先前显示的技术阻止）。

问题似乎是浏览器等待服务器响应

这很难说，因为你自己无法确定。但是假设问题是浏览器正在等待服务器响应。正如你提到的会话加载很慢。两件事：

优化 DB 调用以更快地获取这些菜单数据（如果确实需要那么长时间 - 您是否使用分析器检查过？）
有一个静态的默认 HTML 页面，显示 Loading 内容并执行重定向：
- 使用 META 刷新标签 - 对旧浏览器和没有 javascript 的浏览器更安全
- javascript - 更适合现代页面，尤其是因为您的页面使用 Javascript (__doPostbackanyone)

看来你最好的选择是两者的结合。但是一步一步走，看看是否更好。

还有一件事。我知道等待第一个响应（应用程序启动）需要一些时间。它在许多页面上都这样做。但是人们通常不会真正打扰，因为用户无法对数据造成任何伤害，因为它仍然没有显示。当您在使用页面时响应时间很长时，情况会更糟，因为用户倾向于多次单击同一个按钮（例如在创建/更新数据时）。那危害更大。

也许您将 Asp.net 应用程序启动与会话加载混淆了。当您的应用程序第一次启动时，服务器响应需要更长的时间，因为它必须编译您的应用程序并启动它。这可能需要相当长的时间。有几种解决方法可以解决这个问题，包括更改应用程序回收时间和单独的心跳服务，这些服务向应用程序发出微小的请求，只是为了让它在较长时间的不活动状态下保持活动状态。

您还应该考虑到您的开发中页面是在台式机上运行的。您应该知道您的服务器是否更快。

所以可能不是会话创建，而是应用程序启动。您应该通过在浏览器中打开一个页面并等待它完成来区分，然后关闭浏览器并再次打开它（这样将创建新会话）并访问您的应用程序。如果它加载得更快，那么这不是您的会话的错，而是当 .net 框架必须编译您的应用程序时应用程序启动。

先定义问题，然后开始缓解。

【讨论】：

Robert，插件如何处理 unload 事件？我会试试你的第一个解决方案，但我也想试试这个插件。
罗伯特，等待仅在用户第一次打开浏览器并加载页面时完成。之后，无需等待。
我尝试了您的原始解决方案，但它不起作用，由于某种原因，div 没有显示。请记住，我使用的是 Page.Master，这是我添加 div 代码的地方。我将 css 添加到现有的 style.css 文件中，这样应该没问题。不知道为什么它不起作用。
@baraman：我认为您在理解事物的运作方式方面遇到了一些问题。也许您指的是浏览器等待服务器响应。第一次没有显示任何内容（空白页）。之后，您的页面正在等待下一个加载。也许您想要实现的目标与 GMail 对 loading 首页所做的类似。
罗伯特，我可能是 :-) 我认为问题在于没有加载 HTML 的任何部分，因为 session_start 正忙于从服务器取回数据。完成后，页面会立即显示。这可能是上述解决方案不起作用的原因吗？有什么解决方案可以解决这个问题吗？感谢您的专家帮助。

【解决方案2】：

你可以用 CSS 做到这一点。在一切之上创建一个绝对定位的 div。在该 div 中，您可以编写“正在加载”消息。页面加载完成后，您可以使用 javascript 在该 div 上设置 display:none。

【讨论】：