如何处理jQuery中的许多元素？

Question

我期待创建一个由不同面板组成的网站.假设我们有4个面板.每个面板在给定的时间点占据整个屏幕,看起来与此类似

--------------------------------
|     home     ||     about    |
|    a menu    ||    a menu    |
|              ||              |
--------------------------------
--------------------------------
|    contact   ||     jobs     |
|    a menu    ||    a menu    |
|              ||              |
--------------------------------

假设我现在点击主页上的"作业"链接.我希望屏幕能够垂直滚动到包含所有项目的容器的右下角.

这不是一个问题,我知道我可以用ScrollTo这样的插件实现这个目标.

现在想象一下,而不是只有4页,我有16个.这个插件可以很容易地缩放,但由于页面上存在很多元素(每个面板包含图像,文本,菜单,标题等等),因此网站速度变慢大幅下降.

当我已经在给定的页面上时,我可以通过隐藏所有其他页面来解决这个问题 - 但是如何在从一个面板动画到另一个面板的同时处理所有元素？任何实施的想法？

谢谢!

Answer 1

不要将所有内容加载到DOM,使用ajax并提取所需内容并删除不需要的内容.我在一个非常类似于你所描述的网站上工作,我去了"隐藏所有dom"路线,我最终不得不重新编写部分内容以使用ajax,因为页面只需要很长时间才能加载.

Answer 2

2美分：

• 默认情况下，除活动面板外的所有面板均被隐藏，并具有附加的 css 类（例如“面板简化”）
• panel-simplified 将布局减少到绝对最小：没有先进的 css3 技术，只显示选定的内容，甚至可能是虚拟内容
• 单击时目标面板获得完整的美感/失去面板简化
• 仅显示“传递”的必要面板（最小：2 个面板，最大：~ 10 个面板 (0,0) -> (4/4)）

例如，在 (0,0) -> (2,2) 之前声明。没有标签的隐藏面板。

----------------------------------------------------------------
|    (0,0)     ||     (1,0)    ||     (2,0)    ||     (3,0)    |
|    FULL      ||      SIMP    ||              ||              |
----------------------------------------------------------------
----------------------------------------------------------------
|    (0,1)     ||     (1,1)    ||     (2,1)    ||     (3,1)    |
|     SIMP     ||     SIMP     ||      SIMP    ||              |
----------------------------------------------------------------
----------------------------------------------------------------
|    (0,2)     ||     (1,2)    ||     (2,2)    ||     (3,2)    |
|              ||     SIMP     ||      FULL    ||              |
----------------------------------------------------------------
----------------------------------------------------------------
|    (0,3)     ||     (1,3)    ||     (2,3)    ||     (3,3)    |
|              ||              ||              ||              |
----------------------------------------------------------------