CODEWITHSUNDEEP
javascriptjqueryperformanceinternet-explorer
Jens Sogaard
Jens Sogaard

Reputation: 31

Tips on how to optimize performance for some Jquery commands in IE

Show/hide thumb grid is painfully slow in IE8.

I have a thumb that operates with a category attribute on each thumb and some toggles to show the different categories. The code below handles the showing/hiding thumbs but this is extremely slow in IE and sometimes throws the "A script is slow"-warning. I guess there's no need to state that this runs very well in all other browsers.

My question is: can you help with some performance tips? Maybe even hints a to whether it makes sense to rewrite that bit to pure Javascript?

$('#cat-tab .categories-list a').live('click', function() {
        var $this = $(this);
        var $target = $('#cat-tab .video-results');
        var $text = $.trim($('span', $this).text());
        $scroll = $(window).scrollTop();

        $('#cat-tab .categories-list a').removeClass('active');
        $this.addClass('active');

        $('#cat-tab .video-results .channel').removeClass('hidden');
        if($text != 'All') {
            $('#cat-tab .video-results .channel[rel!="'+$text+'"]').addClass('hidden');
        }
        $.rePage(true);

        return false;
    });

Upvotes: 3

Views: 380

Answers (1)

bobince
bobince

Reputation: 536349

Instead of laboriously finding and hiding each individual thumb element from script, leverage stylesheets into doing the work for you:

#categories .channel { display: none; }
#categories.category-all .channel { display: block; }
#categories.category-1 .channel-1 { display: block; }
#categories.category-2 .channel-2 { display: block; }
#categories.category-3 .channel-3 { display: block; }
#categories.category-4 .channel-4 { display: block; }

Now you can just set the className of the ancestor #categories element, and all the thumbs inside will show/hide depending on whether they have a matching class for that category.

Upvotes: 3

Related Questions