如何创建页面覆盖，而数据加载 - asp.net/jquery/blockui [英] How to create page overlay while data is loading - asp.net/jquery/blockui
问题描述
我试图显示，上面写着页面加载，请等待当数据从SQL Server retrived覆盖。我希望用BlockUI插件这一点，但什么都行。我使用的Site.Master一个ASP.NET页面。该插件的作品，但无论怎样我试过了，只有在页面完全加载出现。
I'm trying to display an overlay that says "page loading...please wait" while data is being retrived from a sql server. I'm hoping to use the BlockUI plugin for this but anything will do. I have an ASP.NET page using a site.master. The plugin works but no matter what I tried, it only appears AFTER the page was fully loaded.
等候的大部分是下降到Global.asax文件所做的工作。在在session_start节中，我有一个返回的数据来填充我的网页上下拉菜单的功能。这大约需要20秒即可完成。
The bulk of the waiting is down to work done in the Global.asax file. In the Session_Start section, I have a function that returns data to populate dropdown menus on my page. This takes about 20 seconds to complete.
所以，我需要什么，以查看叠加做之前，页面完全加载？
感谢您的任何帮助或建议。
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.
推荐答案
如果你想，直到它的加载来将挡你的页面，的内容阻滞剂的元素应该是你的页面的一部分，而不是由你的页面加载后始终运行任何插件生成的。在时间或其他一些点。
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>
和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();
});
这是使用上述code进行工作的例子。它在超时删除拦截器，因为它是这样一个简单的文档。
This is a working example using the code above. It removes blocker on timeout, because it's such a simple document.
但也许你不理解的正确方法。也许你想阻止现有的页面时，回发到服务器，因为这是一个不同的故事。在这种情况下，你的插件就足够了，应在卸载窗口事件，并显示阻挡件运行。这会阻止现有页面，而它回发其数据和之前的浏览器开始接收新的内容（可以用previously显示技术被阻止）。
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. 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'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:
- 优化我DB调用得到这些菜单数据更快（如果它真的需要那么久？ - 有你和分析器检查）
- 有显示的加载的内容并执行重定向一个静态默认的HTML页面：
- 使用META刷新标记 - 更安全的旧的浏览器和那些没有的JavaScript
- JavaScript的 - 现代的网页更好，尤其是因为你的页面使用Javascript（
__ doPostback人）
- 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:
- using a META refresh tag - safer for old browsers and those without javascript
- javascript - better for modern pages and especially because your page is using Javascript (
__doPostbackanyone)
看来，最好的办法是两者的结合。但是走一步一个时间，看看情况是否好转。
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.
也许你混淆了Asp.net应用程序的启动与会话负载。当你的应用程序第一次启动时需要花费更长的服务器响应，因为它必须编译应用程序并启动它。这可能需要相当长的时间。有几种解决方法的，包括使微小的请求应用程序更改应用程序回收时间和不同的心跳服务只是为了在闲置较长时间保持它活着。
And maybe you're confusing the Asp.net application start-up with your session loading. 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.
因此，也许它不是会话创建，而是应用程序的启动。你应该告诉通过在浏览器中打开一个网页，并等待它完成，然后关闭浏览器，然后重新打开它的差异（所以新的会话将获得创建）和访问应用程序。如果它加载速度更快那就不是你的会话的错，而是应用程序启动时，.NET框架已编译应用程序。
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.
第一个定义问题然后开始缓解
这篇关于如何创建页面覆盖，而数据加载 - asp.net/jquery/blockui的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
