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

Question

I'm trying to display an overlay that says "page loading...please wait" while data is being retrived from a sql server. 我正在尝试显示一个覆盖，上面写着“页面加载......请等待”，同时从sql server恢复数据。 I'm hoping to use the BlockUI plugin for this but anything will do. 我希望为此使用BlockUI插件，但任何事情都可以。 I have an ASP.NET page using a site.master. 我有一个使用site.master的ASP.NET页面。 The plugin works but no matter what I tried, it only appears AFTER the page was fully loaded. 该插件可以工作，但无论我尝试什么，它只会在页面完全加载后出现。

The bulk of the waiting is down to work done in the Global.asax file. 大部分等待都是在Global.asax文件中完成的。 In the Session_Start section, I have a function that returns data to populate dropdown menus on my page. 在Session_Start部分中，我有一个函数返回数据以填充页面上的下拉菜单。 This takes about 20 seconds to complete. 这需要大约20秒才能完成。

So, what do I need to do in order to view the overlay BEFORE the page is fully loaded? 那么，在页面完全加载之前，我需要做什么才能查看叠加层？ Thanks for any help or advice. 感谢您的帮助或建议。

Answer 1

For loading pages, plugins won't do the trick 对于加载页面，插件不会起作用

If you want your page to be blocked until it's loaded, content blocker element should be part of your page and not generated by any plugin that always run after your page has loaded. 如果您希望在加载页面之前阻止页面， 内容拦截器元素应该是页面的一部分，而不是由页面加载后始终运行的任何插件生成。 At some point in time or another. 在某个时间点或另一个时间点。

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

And have CSS do the rest 还有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;
    }

And Javascript that clears blocking: 和Javascript清除阻止：

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

This is a working example using the code above. 这是使用上面代码的工作示例。 It removes blocker on timeout, because it's such a simple document. 它会在超时时删除阻塞，因为它是一个如此简单的文档。

Important notice 重要的提醒

But maybe you're not understanding this the right way. 但也许你不是以正确的方式理解这一点。 Maybe you would like to block existing page when it posts back to server, because that's a different story. 也许您想在发回服务器时阻止现有页面，因为这是一个不同的故事。 In this case your plugins should suffice and should run on unload window event and display blocker element. 在这种情况下，您的插件应该足够，并应该在unload窗口事件和显示阻止元素上运行。 This would block existing page while it posts back its data and before browser starts receiving new content (which can be blocked with previously shown technique). 这将阻止现有页面在回发其数据时以及在浏览器开始接收新内容之前（可以使用先前显示的技术阻止）。

It seems the problem is browser waiting for server response 似乎问题是浏览器在等待服务器响应

It's hard to tell since you can't pin point it yourself. 这很难分辨，因为你不能自己指出它。 But suppose the problem is that browser is waiting for server to respond. 但是假设问题是浏览器正在等待服务器响应。 And as you mention session loading is slow. 当你提到会话加载很慢。 Two things: 两件事情：

Optimise DB call to get those menu data quicker (if it really takes that long - have you checked with profiler?) 优化数据库调用以更快地获取这些菜单数据（如果确实需要很长时间 - 您是否使用分析器进行了检查？）
Have a static default HTML page that displays the Loading content and executes a redirect: 有一个静态默认HTML页面，显示加载内容并执行重定向：
- using a META refresh tag - safer for old browsers and those without javascript 使用META刷新标签 - 对于旧浏览器和没有javascript的浏览器更安全
- javascript - better for modern pages and especially because your page is using Javascript ( __doPostback anyone) javascript - 更好的现代页面，特别是因为您的页面使用Javascript（ __doPostback任何人）

It seems that your best bet is the combination of both. 看来你最好的选择是两者的结合。 But go one step at a time and see if it's better. 但是一步一步，看看它是否更好。

One more thing. 还有一件事。 I know that waiting for the first response (application start) takes some time. 我知道等待第一个响应（应用程序启动）需要一些时间。 It does so on many pages. 它在许多页面上都这样做。 But people usually don't really bother since users can't do no harm with data because it's still not displayed. 但是人们通常并不打扰，因为用户不会对数据造成伤害，因为它仍然没有显示出来。 It's much worse when your response times are long when using the page, because users tend to click the same button several times (when creating/updating data for instance). 当您使用页面的响应时间很长时会更糟糕，因为用户倾向于多次单击相同的按钮（例如，创建/更新数据时）。 That is much more harmful. 这更有害。

And maybe you're confusing the Asp.net application start-up with your session loading. 也许你把Asp.net应用程序启动与你的会话加载混淆了。 When you application first starts it takes much longer for server to respond, because it has to compile your application and start it up. 当您首次启动应用程序时，服务器响应需要更长的时间，因为它必须编译您的应用程序并启动它。 This can take considerable time. 这可能需要相当长的时间。 There are several workarounds for that that include changes to application recycling times and separate heartbeat services that make tiny requests to application just to keep it alive during longer time of inactivity. 有几种解决方法可以包括对应用程序回收时间的更改以及单独的心跳服务，这些服务会对应用程序提出微小的请求，以便在长时间不活动时保持活动状态。

You should also take into account that your in development page is running on a desktop machine. 您还应该考虑到您的开发页面是在台式机上运行的。 You should know whether your server is faster. 您应该知道您的服务器是否更快。

So maybe it's not the session creation but rather application start-up. 所以也许这不是会话创建，而是应用程序启动。 You should tell the difference by opening a page in a browser and waiting for it to complete, then close the browser and opening it again (so new session will get created) and access your application. 您应该通过在浏览器中打开页面并等待它完成来区分，然后关闭浏览器并再次打开它（以便创建新会话）并访问您的应用程序。 If it loads faster then it's not your session's fault but rather application start-up when .net framework has to compile your application. 如果它加载得更快，那么它不是你的会话的错，而是.net框架必须编译你的应用程序时启动应用程序。

Define the problem first then start mitigation . 首先定义问题然后开始缓解 。

Answer 2

you could do it with CSS. 你可以用CSS做到这一点。 Create a div positioned absolute, on top of everything. 在所有事物之上创建一个绝对的div。 Inside that div you can write your 'Loading' message. 在该div中，您可以编写“正在加载”消息。 When the page has done loading, you can set display:none on that div using javascript. 页面加载完成后，您可以使用javascript在该div上设置display：none。

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

问题描述

2 个解决方案

解决方案1
12 已采纳 2011-10-26 10:58:39

For loading pages, plugins won't do the trick 对于加载页面，插件不会起作用

Important notice 重要的提醒

It seems the problem is browser waiting for server response 似乎问题是浏览器在等待服务器响应

解决方案2
0 2011-10-26 11:00:42

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

问题描述

2 个解决方案

解决方案1 12 已采纳 2011-10-26 10:58:39

For loading pages, plugins won't do the trick 对于加载页面，插件不会起作用

Important notice 重要的提醒

It seems the problem is browser waiting for server response 似乎问题是浏览器在等待服务器响应

解决方案2 0 2011-10-26 11:00:42

解决方案1
12 已采纳 2011-10-26 10:58:39

解决方案2
0 2011-10-26 11:00:42