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

时间:2011-10-26 10:52:53

标签: jquery asp.net overlay blockui

我正在尝试显示一个覆盖,上面写着“页面加载......请等待”,同时从sql server恢复数据。我希望为此使用BlockUI插件,但任何事情都可以。我有一个使用site.master的ASP.NET页面。该插件可以工作,但无论我尝试什么,它只会在页面完全加载后出现。

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

那么,在页面完全加载之前,我需要做什么才能查看叠加层? 感谢您提供任何帮助或建议。

2 个答案:

答案 0 :(得分:12)

对于加载页面,插件不会起作用

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

<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窗口事件和显示阻止元素上运行。这将阻止现有页面在回发其数据时以及浏览器开始接收新内容之前(可以使用先前显示的技术阻止)。

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

很难分辨,因为你不能自己指出它。但是假设问题是浏览器正在等待服务器响应。当你提到会话加载很慢。两件事:

  1. 优化数据库调用以更快地获取这些菜单数据(如果确实需要这么长时间 - 您是否使用了探查器进行了检查?)
  2. 有一个静态默认HTML页面,显示正在加载内容并执行重定向:
    • 使用META刷新标记 - 对于旧浏览器和没有javascript的浏览器更安全
    • javascript - 更适合现代网页,尤其是因为您的网页使用的是Javascript(__doPostback任何人)
  3. 似乎你最好的选择是两者的结合。但是一步一步,看看它是否更好。

    还有一件事。我知道等待第一个响应(应用程序启动)需要一些时间。它在许多页面上都这样做。但是人们通常并不打扰,因为用户不会对数据造成伤害,因为它仍然没有显示出来。当您使用页面的响应时间很长时会更糟糕,因为用户倾向于多次单击相同的按钮(例如,创建/更新数据时)。这更有害。

    也许你对Asp.net应用程序启动与你的会话加载混淆了。当您首次启动应用程序时,服务器响应需要更长的时间,因为它必须编译您的应用程序并启动它。这可能需要相当长的时间。有几种解决方法可以包括对应用程序回收时间的更改以及单独的心跳服务,这些服务会对应用程序发出微小的请求,以便在长时间不活动时保持活动状态。

    您还应该考虑到您的开发页面正在桌面计算机上运行。你应该知道你的服务器是否更快。

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

    首先定义问题然后开始缓解

答案 1 :(得分:0)

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