如何快速显示大部分 html 页面，然后最后加载缓慢的内容？答案

【问题标题】：How can I display most of an html page quickly, then load the slow things last?如何快速显示大部分 html 页面，然后最后加载缓慢的内容？
【发布时间】：2012-06-08 18:49:05
【问题描述】：

我有一个这样的 JSP 页面：

<html><body>
<div id="mainContainer">
    <div id="firstDisplayStuff">...</div>
    <% out.flush(); %>
    <div id="slowStuff">
        <mytaglib:abc name='SlowBoat'>...</mytaglib>
    </div>
</div>
<div id="floatRightContainer>
    <div id="endingDisplayStuff">...</div>
<div>
</body></html>

当它碰到 taglib 时，它需要永远，并且无法避免延迟。

所以使用out.flush(); 我至少可以显示firstDisplayStuff，但是当taglib 的东西运行时用户只是坐在那里看半页。只有在完成之后，用户才能看到endingDisplayStuff。

我希望firstDisplayStuff 和endingDisplayStuff 都立即显示。

但我认为使用 jQuery，有一种方法可以将 <div id="slowStuff"> 留空，然后稍后再加载。

在两个显示内容 div 都显示之后，加载 <div id="slowStuff"> 的 jQuery 代码会是什么样子？我应该把代码放在哪里？怎么调用？

编辑：在现有示例中添加了<div id=mainContainer> 和<div id=floatRightContainer>。

【问题讨论】：

嗯，有 50:50 的机会接受答案。
是的，@Diodeus，但我会问一些棘手的问题，而且问的不多。他们中的一些人仍然没有很好的答案。但我会回去看看，只为你;）

标签： javascript jquery ajax jsp taglib

【解决方案1】：

您不需要 JavaScript。只需将最后一个 div 放在慢速 div 之前，然后使用 CSS 在屏幕上按照适合您的方式排列 div：

<html><body>
<div id="firstDisplayStuff">...</div>
<div id="endingDisplayStuff">...</div>

<% out.flush(); %>
<div id="slowStuff" style="display: none;">
    <mytaglib:abc name='SlowBoat'>...</mytaglib>
</div>
</body></html>

您可以使用几行代码（从 body onload 调用）将慢速 div 放到它所属的位置，然后显示它。 $('#slowStuff').insertAfter('#someDiv') 让它位于正确的位置，$('#slowStuff').show(); 让它显示。

【讨论】：

使用 CSS 来安排事情是令人讨厌的。这真是个JS问题。
CSS 意味着 用来安排事情。怎么会让人讨厌呢？
@FireLizzard - 这样做可以避免另一个 HTTP 请求（使用 AJAX 加载内容）。我不明白这是一件坏事。
@JamesAllardice - 我理解避免第二个 HTTP 请求，但我使用 CSS 的经验让我回避使用它来安排，更不用说大幅改变布局的自然状态。我非常喜欢将布局留给 HTML，将样式留给 CSS。我的每一次尝试都是痛苦的。
@JBNizet，当我移动 slowStuff div 时，taglib 内容显示在页脚下方。我想我需要研究如何让 CSS 将它放回它所属的包含 div 中。

【解决方案2】：

在 DOM 上准备一个正常的 Ajax 请求，并用呈现的 HTML 填充 div：

$(function() {
  $("#slowStuff").load(theUrl, etc.)
});

请参阅load docs。

向（JSP、动作、控制器等）发出请求，该请求会呈现带有自定义标记的 JSP。

【讨论】：

有点相关...我很惊讶 HTML5 的一部分不会成为元素的优先属性。
谢谢戴夫。我查看了负载，但无法使其正常工作；只是加载一个随机备用页面，它会清除整个原始页面，而我本来希望将随机备用页面加载到 div 中。然后是“将代码放在哪里”/“如何调用它”的问题。我猜“$(document).ready(function(){...});”被要求，但在哪里？在身体装载？抱歉，我正在学习。
@Dale 它位于 html 正文底部的脚本标记中。如果不知道自己做了什么，就无法帮助诊断。
再次感谢戴夫。我选择使用 CSS 解决方案，但我遇到了另一种情况，我需要 ajax 解决方案。我会在那里再次尝试加载。