CODEWITHSUNDEEP
javascriptjquery
user971627
user971627

Reputation: 21

slow jquery performance

I have about 200 small icons (4kb) on my web page on click on a menu i want the icons to dim out im using this function

if (which!="all")
{                                   
    $(function () {
        // SET OPACITY  TO 20%
        $("."+which).stop().animate({opacity: '0.2'}, 100);
    });
}

for some reason the performance is very slow and it takes a long time for the icons to dim out How can i speed up the performance ?

thanks

Upvotes: 2

Views: 249

Answers (5)

Blazemonger
Blazemonger

Reputation: 92893

You should try using CSS sprites -- basically one large image "sliced" into 200 small pieces.

Then you can create a second large image, exactly like the first, but dimmed out -- and use JavaScript/jQuery to swap one image for the other at every instance.

If nothing else, this should improve your page load times considerably.

Upvotes: 0

Jan
Jan

Reputation: 16

You could try to cache the icon objects in an array and loop over them. Or use css to change opacity.

Upvotes: 0

Andy
Andy

Reputation: 30135

if you want to dim all the icons at once, you could try dimming the parent container instead of each individual icon.

Upvotes: 0

Blindy
Blindy

Reputation: 67380

I would venture a guess and say that the poor performance is changing the DOM properties of 200 items a lot of times per second over and over (mouse over right?)

You should consider a more DOM-friendly approach, like <canvas> and drawing your view manually.

Upvotes: 0

Greg Pettit
Greg Pettit

Reputation: 10830

You can animate opacity with CSS3. As long as that's an option within your requirements, I would advise looking into CSS3 for this kind of animation instead of JS.

Upvotes: 2

Related Questions