javascript - 是否有一种规范的方式来为缓慢加载的网页呈现 "loading"弹出窗口？

Question

前言:

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

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

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

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

此处明显的可用性问题是，用户在步骤#1 中单击按钮时必须坐在那里，而网页似乎什么都不做(浏览器显示它正在连接到页面# 2 在状态栏上，但大多数用户没有注意到)；然后它用一个空页面替换页面 #1 的内容，该页面也似乎什么也没做，同时正在呈现内容并从大型数据集构建 DOM。

我撇开上面的解决方案设计得很糟糕，需要适本地重新设计的事实:(1)利用 AJAX 检索数据；和/或 (2) 在更小的(人类可消费的) block 中检索数据，并根据需要逐步加载更多数据。由于资源限制而没有这样的重新设计，我正在尝试应用具有以下性质的快速而肮脏的可用性修复:

一个。单击第 1 页上的按钮后，将向用户显示一个模式弹出窗口，其中显示“正在处理和重新加载数据。这可能需要大约 3 分钟才能完成”。

B.重要的是，模式弹出窗口应该在第 2 页加载开始时持续存在(或者至少无缝地重新创建)。

---

问题:

构建此类模式弹出窗口的“最佳实践”方法是什么？

显然，#A 单独实现是微不足道的(第 1 页上的弹出窗口将一直存在，直到来自第 2 页的 HTTP 响应到达客户端并且第 2 页开始呈现替换第 1 页)。

但是，当第 2 页到达时，保留/重新克隆此弹出窗口的最佳方法是什么？这里的 2 个问题是要尽可能地实现从 HTTP 响应之前弹出和之后弹出的无缝过渡；更重要的是，避免必须等待整个页面 #2 呈现(在显示弹出窗口之前等待 30 秒)。

澄清:

• 任何建议的方法都不应是 AJAX。例如。所做的任何事情都必须包含在页面 2 的 HTTP 响应发送的相同 HTML 内容中。

• 我正在寻找一般的技术指导，不一定是示例代码。类似于“使用 window.onload 处理程序来执行此操作”的顺序(显然是错误的正确答案)。

• 理想情况下，解决方案应该使用纯 Javascript，但如果存在使用 jQuery 或 YUI 的更好解决方案，我会考虑。

Answer 1

所以这实际上是一个非常简单的修复。查看this fiddle对于一些示例覆盖代码。

当您的页面准备就绪时，只需进行此调用(如果您使用的是 jQuery):

$(function(){
    $('.overlay').fadeOut();
});

基本上，默认情况下，您的叠加层将在那里，而下面加载的任何内容都将被隐藏。加载所有内容后，只需淡出叠加层即可完成!您不需要任何特殊脚本或任何东西，只需默认打开覆盖，并在准备就绪时将其关闭。

如果您想开始将此用于 AJAX，在进行 ajax 调用之前，只需调用 $('.overlay').fadeIn(); 更改其中的文本也非常容易叠加层。只要找到节点，

$('.overlay').find('.message p').text('Some new text').end().fadeIn();

如果你只是想使用标准的 JS，你可以按照你的建议将函数附加到 window.onload，但是它只检测页面何时准备好，而不是 DOM，因为 jQuery 的 .ready() 可以。