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

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

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

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

最佳答案
对于加载页面,插件不会起作用

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

还有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.它会在超时时删除阻塞,因为它是一个如此简单的文档.

重要的提醒

但也许你不是以正确的方式理解这一点.也许您想在发回服务器时阻止现有页面,因为这是一个不同的故事.在这种情况下,您的插件应该足够,并应该在卸载窗口事件和显示阻止元素上运行.这将阻止现有页面在回发其数据时以及在浏览器开始接收新内容之前(可以使用先前显示的技术阻止).

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

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

>优化数据库调用以更快地获取这些菜单数据(如果真的花了那么长时间 – 你是否用探查器检查过?)
>有一个静态认HTML页面,显示加载内容并执行重定向

>使用Meta刷新标签 – 对于旧浏览器和没有javascript的浏览器更安全
> javascript – 更好的现代页面,特别是因为您的页面使用Javascript(__doPostback任何人)

看来你最好的选择是两者的结合.但是一步一步,看看它是否更好.

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

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

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

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

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

相关文章

页面搜索关键词突出 // 页面搜索关键词突出 $(function () {...
jQuery实时显示日期、时间 html: <span id=&quot...
jQuery 添加水印 <script src="../../../.....
中文:Sys.WebForms.PageRequestManagerParserErrorExceptio...
1. 用Response.Write方法 代码如下: Response.Write(&q...
Jquery实现按钮点击遮罩加载,处理完后恢复 思路: 1.点击按...