Question

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

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

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

这不是一个问题，我知道我可以使用ScrollTo等插件实现这一目标。

现在想象一下，我只有4页而不是4页。这个插件很容易缩放，但由于页面上存在很多元素（每个面板包含图像，文本，菜单，标题等等），因此网站会大幅减慢。

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

谢谢！

Answer 1

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

Answer 2

不确定你的HTML代码是怎样的，但我同意sjobe的建议。

我猜你有这样一个菜单：

<ul id='menu'>
    <li><a href='#home'>home</a></li>
    <li><a href='#about'>about</a></li>
    <li><a href='#contact'>contact</a></li>
    <li><a href='#jobs'>jobs</a></li>
</ul>

和一些像这样的div：

<div id='container'>
    <div id='home'></div>
    <div id='about'></div>
    <div id='contact'></div>
    <div id='jobs'></div>
</div>

现在是javascript：

// when DOM's ready
$(document).ready(function() {
    // get the current hash or default to #home if none
    hash = window.location.hash ? window.location.hash : '#home';

    // construct the file name to load
    file = hash.replace('#', '/') + '.html';
    // load the file to the div
    $(hash).load(file);
    // and scroll to it
    $.scrollTo(hash, 800, {easing:'elasout'});

    // and create handler for menu click
    $('#menu a').click(function(event) {
        event.preventDefault();
        hash = this.hash;
        $.scrollTo(hash, 800, {easing:'elasout'});
        });
    });

// when page (incl scripts, styles, images, etc) ready
$(window).load(function() {
    // iterate through each menu
    $('#menu a').each(function() {
        // get its hash
        hash = this.hash;
        // construct the file name to load
        file = hash.replace('#', '/') + '.html';
        // preload the file to the div
        $(hash).load(file);
        });
    });

Answer 3

2分钱小费：

默认情况下，除活动之外的所有面板都是隐藏的并且有一个额外的css类（例如“panel-simplified”）
面板简化将布局减少到绝对最小值：没有高级css3技术，只显示选定的内容，甚至可能是虚拟内容
点击目标面板获得完整美观/失败面板简化
仅显示“传递”所需的面板（最小：2个面板，最大：~10个面板（0,0） - >（4/4））

e.g。状态之前（0,0） - ＆gt; （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)    |
|              ||              ||              ||              |
----------------------------------------------------------------

Answer 4

你的元素应该有有意义的id属性。你应该有一个字典，其中包含所有id的位置信息。然后您可以通过这些位置值计算所需的移动方向。比如

 move from (2,4) to (4,2)

所以你计算你将向下和向左移动。对于缓慢的问题，你应该只在这些面板上有html元素（至少是背景图像标识符），并且你可以在制作替换动画后用ajax调用加载信息。

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

4 个答案: