2

前言：

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

  1. 用户单击第 1 页上的按钮。这将提交第 2 页的 POST 请求。

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

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

这里明显的可用性问题是，当在第 1 步中单击按钮时，用户必须坐在那里，而网页似乎什么也没做（浏览器显示它正在连接到状态栏上的第 2 页，但大多数用户没有没有注意到）；然后它将第 1 页的内容替换为一个 EMPTY 页面，该页面也坐在那里似乎什么也没做，而内容正在被渲染并且 DOM 是从一个大型数据集构建的。

我撇开上述解决方案经过精心设计，需要适当地重新设计以：（1）利用 AJAX 检索数据；和/或 (2) 以较小的（人类可消费的）块检索数据，并根据需要逐步加载更多数据。由于资源限制，没有这样的重新设计，我正在尝试应用以下性质的快速而肮脏的可用性修复：

A. 单击第 1 页上的按钮后，用户会看到一个模式弹出窗口，上面写着“正在处理和重新加载数据。这可能需要大约 3 分钟才能完成”。

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

问题：

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

显然，单独实现#A 是微不足道的（页面 1 上的弹出窗口将一直持续到来自页面 2 的 HTTP 响应到达客户端并且页面 2 开始渲染替换页面 1）。

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

澄清：

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

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

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

4

2 回答 2

1

所以这实际上是一个非常简单的修复。查看此小提琴以获取一些示例叠加代码。

当您的页面准备就绪时，只需进行以下调用（如果您使用的是 jQuery）：

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

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

如果您想开始将它用于 AJAX，在您进行 ajax 调用之前，只需调用$('.overlay').fadeIn();它也很容易更改覆盖层内的文本。只要找到节点，

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

如果您只想使用标准 JS，您可以window.onload按照您的建议将该函数附加到，但这只会检测页面何时准备好，而不是 DOM，就像 jQuery 所做的.ready()那样。

于 2012-05-24T21:29:00.370 回答
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>
于 2012-05-24T21:31:59.477 回答