How can I optimize jQuery functions for a large amount of HTML elements

Question

I work on a climate model and I display it on a map grid. I have to use a large grid : 39x60.

So I have to manage 2340 <div> with jQuery. I want to use a jQuery slider to zoom in / out with this :

$("#zoom_slider").slider({
        orientation: "vertical",
        value: 1,
        min: 1,
        max: 10,
        step: 1,
        slide: function( event, ui ) {
            $('.case').css('width', function(index) {
                return index * ui.value;
            });

            $('.case').css('height', function(index) {
                return index * ui.value;
            });
        }
    });

Each cell is built as this example :

<div id="c13_53" class="case line_13 col_53" style="width: 17px; height: 17px; top: 216px; left: 937px;"></div>

But firefox crashes when the function is executed.

Is there a way to fix this problem ?

This may be a dick question, but have you thought of using canvas to show your map instead of an array of divs? — gislikonrad
– gislikonrad, Commented Aug 19, 2011 at 18:22
Another option, depending on what browsers you need to support, could be using CSS transforms. — Matthew Crumley
– Matthew Crumley, Commented Aug 19, 2011 at 18:30
I didn't know this element. I use xHTML 1.1 and FF3.6 but I try to not use CSS3 in order to be compatible for most browsers — Elorfin
– Elorfin, Commented Aug 19, 2011 at 18:36
@R-Tard - it doesn't, but it's still a valid question... canvas is supported by most browers, and for others there is excanvas. — gislikonrad
– gislikonrad, Commented Aug 19, 2011 at 18:52

Jacob · Accepted Answer · 2011-08-19 18:34:33Z

2

One inefficiency in your code is that you're re-selecting every div on every slide event twice. $('.case') forces the scan of the entire DOM. You should cache the elements in a variable and reuse that variable instead of re-scanning constantly.

Another inefficiency may be that multiple slide events could be getting fired as you slide; putting a throttle on your handler could speed things up.

answered Aug 19, 2011 at 18:34

Jacob

79k24 gold badges159 silver badges245 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Andrew Over a year ago

From the docs This event is triggered on every mouse move during slide. SO yeah, there's one big problem.

gislikonrad Over a year ago

That's a very good point... Storing the divs in a $case variable outside the event would be a good optimization for this. +1

Andrew · Accepted Answer · 2011-08-19 19:07:38Z

1

Was it your intention to set each one larger by what index it has? That will mean no matter which way the slider goes they will get bigger, much bigger. Better to store a reference value I think.

//Size in pixels.
var originalSize = 20,
    cases = $('.case');

 stop: function(_, ui) {
        var size = ui.val * originalSize;
        cases.css({width: size + 'px', height: size + 'px'});
    }

Used stop as per Jacobs suggestion. This will at least make it more efficient, as to whether it stops crashing, no idea.

edited Aug 19, 2011 at 19:07

answered Aug 19, 2011 at 18:32

Andrew

13.9k14 gold badges70 silver badges85 bronze badges

Collectives™ on Stack Overflow

How can I optimize jQuery functions for a large amount of HTML elements

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related