How to handle many elements in jQuery?

I am looking to create a site composed of different panels. Let's say we h开发者_运维知识库ave 4 panels. Each panel takes up the whole screen at a given point in time, and looks something similar to this

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

Let's say I now click on the "jobs" link through the home page. I'd like the screen to scroll with an animation vertically, to the bottom right hand corner of the container that contains all the items.

This is not that much of a problem, and I am aware I can achieve that with a plugin such as ScrollTo.

Now imagine that instead of just 4 pages, I have 16. This plugin can easily be scaled, but since so many elements exist on the page (each panel contains images, text, menu, titles, etc...), the site slows down substantially.

I can resolve this problem when I am already on a given page, by hiding all the other pages -- but how can I handle all the elements while animating from one panel to another? Any ideas for implementation?

Thank you!

---

Don't load everything to the DOM, use ajax and pull in what you need and remove what you don't. I worked on a site very similar to what you describe once and I went the "hide everything in the dom" route, I eventually had to re-write parts of it to use ajax because the page was simply taking too long to load.

---

2Cents:

• by default all panels except the active are hidden AND have an additional css class (e.g. "panel-simplified")
• panel-simplified reduces the layout to the absolute minimum: no advanced css3 techniques, only selected content is shown, maybe even dummy content
• on click the target panel gains full beauty / loses panel-simplified
• only the necessary panels, which are "passed along" are shown (min: 2panels, max: ~ 10 panels (0,0) -> (4/4))

e.g. State before (0,0) -> (2,2). Hidden panels without a label.

----------------------------------------------------------------
|    (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)    |
|              ||              ||              ||              |
----------------------------------------------------------------

---

not sure how's your html code is, but i agree with sjobe suggestion.

i'm guessing you have a menu like so:

<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>

and some divs like so:

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

now the 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);
        });
    });

---

your elements should have meaningful id attributes.You should have a dictionary that holds position info for all those id's. and then you can calculate the desired direction of move by those position values . Like

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

so you calculate that you will move downwards and left. And for the slowing problem, you should only have the html elements on these panels(and a background image identifier at least) , and you can load the info with ajax calls after you make the replacement animation.