Question

我有一个这样的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显示之后，jQuery代码在加载<div id="slowStuff">后会是什么样子？我会把代码放在哪里？如何调用它？

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

Answer 1

在DOM上准备一个普通的Ajax请求并用渲染的HTML填充div：

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

请参阅load docs。

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

Answer 2

您不需要JavaScript。只需将最后一个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();让它显示。

如何快速显示大部分html页面，然后加载缓慢的东西？

2 个答案: