是否有规范的方法为缓慢加载的网页提供“加载”弹出窗口?

时间:2012-05-24 21:12:36

标签: javascript user-interface javascript-events

前言

我有一个以简单方式运作的网络应用程序:

  1. 用户点击第1页的按钮。这会提交第2页的POST请求。

  2. 在后端检索数据需要1-2分钟。

  3. 后端将计算出的HTML发送到浏览器,需要一段时间(10-30秒)才能呈现。

  4. 显而易见的可用性问题是,用户在单击步骤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的更好解决方案,我会考虑它。

2 个答案:

答案 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页到达时显示指示符再过10秒以呈现

好吧,你应该尽早加载第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>