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

【问题标题】：Render hidden parts of a form after the DOM fires在 DOM 触发后渲染表单的隐藏部分
【发布时间】：2011-03-15 22:09:14
【问题描述】：

我的网站上有几个页面，其中相当大的文本块是使用 JQuery 和/或常规 Javascript 选项卡切换的。

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

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

【问题讨论】：

标签： javascript ruby-on-rails ajax ruby-on-rails-3

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

您走在正确的轨道上：AJAX 是实现此目的的方法。基本方法是：

将每个隐藏的项目移动到自己的偏。
编写控制器呈现这些中的每一个的操作部分。
在主视图中，使用 AJAX 调用这些动作中的每一个并插入结果（即呈现的部分）到适当的页面中的位置。

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

抱歉，我没有提供完整的代码示例，但这应该可以为您提供总体策略（并为您指明下一步该往哪里看）。

【讨论】：