前言
我有一个以简单方式运作的网络应用程序:
用户点击第1页的按钮。这会提交第2页的POST请求。
在后端检索数据需要1-2分钟。
后端将计算出的HTML发送到浏览器,需要一段时间(10-30秒)才能呈现。
显而易见的可用性问题是,用户在单击步骤1中的按钮时,必须坐在那里,而网页似乎什么都不做(浏览器显示它正在连接到页面#状态栏上有2个,但大多数用户都没有注意到);然后它用一个EMPTY页面取代了页面#1的内容,这个页面似乎什么都不做,而内容正在呈现,DOM是从大型数据集构建的。
我抛弃上述解决方案设计得非常好的事实,需要对其进行适当的重新设计:(1)利用AJAX检索数据;和/或(2)以较小(人类可消耗的)块的形式检索数据,并根据需要逐步加载更多数据。由于资源限制而没有这样的重新设计,我正在尝试应用以下性质的快速和脏的可用性修复:
一个。单击第1页上的按钮后,将向用户显示一个模式弹出窗口,其中显示“正在处理并重新加载数据。这可能需要约3分钟才能完成”。
B中。重要的是,模态弹出窗口应该在加载开始时保持(至少可以重新创建)。
问题:
构建此类模式弹出窗口的“最佳做法”方法是什么?
显然,#A单独实现是非常简单的(在第1页上弹出,直到来自客户端的HTTP响应并且开始呈现替换第1页)。
但是当到达时保留/重新克隆此弹出窗口的最佳方法是什么?这里的两个问题是尽可能地实现从HTTP弹出之后的弹出和弹出之后的无缝转换;更重要的是,避免必须等待完整的页面#2渲染(在显示弹出窗口之前30秒)。
澄清:
任何建议的方法都不应该是AJAX。例如。所做的任何事情都必须包含在HTTP响应发送的相同HTML内容中。
我正在寻找一般技术指针,不一定是示例代码。 “使用window.onload
处理程序执行此操作的顺序”(明显错误的答案正确性)。
理想情况下,解决方案应使用纯Javascript,但如果存在使用jQuery或YUI的更好解决方案,我会考虑它。
答案 0 :(得分:1)
所以这实际上是一个非常简单的修复。查看this fiddle以获取一些示例覆盖代码。
当您的页面准备就绪时,只需进行此调用(如果您使用的是jQuery):
$(function(){
$('.overlay').fadeOut();
});
基本上,默认情况下,您的叠加层将在那里,并且隐藏下面的任何内容。一旦所有东西都加载完毕,只需淡出你的叠加层就可以了!您不需要任何特殊脚本或任何内容,只需在默认情况下启用叠加功能,并在准备好后将其关闭。
如果你想开始使用它来进行AJAX,那么在你进行ajax调用之前,只需调用$('.overlay').fadeIn();
这也很容易改变叠加内的文本。只需找到节点,
$('.overlay').find('.message p').text('Some new text').end().fadeIn();
如果您只想使用标准JS,可以按照建议将函数附加到window.onload
,但这只能检测页面何时就绪,而不是像jQuery .ready()
那样检测DOM。
答案 1 :(得分:0)
所以从我对你的论文问题的理解(这是一堆诚实的读书)
好吧,你应该尽早加载第2页的模态。将库和脚本加载到头上。由于解析通常是自上而下的,因此模式应该在慢速内容之前,以便它被解析并可用于脚本。
利用jQuery的$(document).ready()
,它在DOM准备就绪时执行,而不是window.onload
,它在呈现所有内容时执行(DOM,图像和所有内容)
<script src="jquery.js"></script> <!--libraries like jquery-->
<script>
$(function(){ //execute dialog as soon as
$('#modal').dialog(); //the modal div is available
});
</script>
<body>
<div id="modal"></div>
<!--the rest of the slow rendering page-->
</div>