在DOM触发后渲染表单的隐藏部分

Question

我的网站上有几页，其中使用JQuery和/或常规Javascript标签切换了相当大的文本块。

目前表现还不错，但我知道随着网站流量的增长，可能会出现降级。好的部分是页面的80％内容在一开始就不可见 - 用户必须点击某些内容才能看到其他内容。

有没有办法在加载20％时让页面显示，其余的按照自己的节奏完成加载？ （仅供参考我使用Javascript，但我是AJAX的新手。）时间上的差异可能只有十分之几秒，但正如您所知，这可能就是一切。 ：）

Answer 1

你走在正确的轨道上：AJAX就是这样做的。基本方法是：

1. 将每个隐藏的项目移动到 它本身的部分。
2. 写一个控制器 动作来渲染其中的每一个 谐音。
3. 在主视图中，使用 AJAX调用这些动作中的每一个 并插入结果（即， 渲染部分）到适当的 页面中的位置。

最后一步可以以不同的方式发生。如果你肯定用户将采取最终揭示这些部分的动作，你可以在页面加载时进行AJAX调用（即在$（document）.ready（function（）{...}）内; ）。或者，如果您愿意让用户等待一段时间但减少服务器的负载，则可以在用户采取行动时进行AJAX调用。

很抱歉，我没有提供完整的代码示例，但这应该为您提供整体策略（并指出您在下一步的位置）。

Answer 2

您可以在加载时渲染页面的主要部分，然后使用Javascript或jQuery进行异步回调，将剩余的缺失部分加载为隐藏的html元素。

连接跨浏览器的DOM加载事件的最简单方法是使用jQuery。它是一个框架，可以轻松地使用JS和DOM。他们在Docs page上有一些非常好的教程。 要在DOM加载完成后执行javascript代码，请使用

$(document).ready(function(){
   // Your code here
 });

要执行ajax请求，您可以使用ajax方法。文档在解释它是如何工作方面做得非常好。 然后在成功回调上，您可以使用选择器和其他方法将响应挂钩回DOM。 你有很多选择附加，appendTo，prepend，prependTo，insertBefore，inserfAfter。您可以在我链接到的jQuery站点上找到方法的文档。