CODEWITHSUNDEEP
jquerygoogle-chromefirefoxlag
Nigel M.
Nigel M.

Reputation: 73

Severe jQuery lag on Firefox & Chrome, not IE though

As stated in the title, this one-page site with minimal jQuery is suffering from crazy lag on Chrome and Firefox, but not on IE10. I do realize MS stepped up their game with 10, but for the sweet lord's sake, what is the deal?

I've read that sometimes Chrome is laggy with div hide()s and show()s, but I'm using fadeIn() and fadeOut(), and it seems like there's something I'm missing.

I've created a JSFiddle for it in case I've somehow done something horrifically wrong.

http://jsfiddle.net/g2avityhitz/ZdqEd/1/

(function($){
    $(document).ready( function () {
        $("#picbox .tiny img").click( function () {
            $("#picbox .tiny img").removeClass('selected');
            $(this).addClass('selected');
            imgSrc = $(this).attr('src');
            $("#picbox .main").css({
                'background-image'  : 'url(' + imgSrc + ')'
            });
            $("#picbox .main a").attr('href',imgSrc);
        });

        $("#picbox .main a").click( function (e) {
            e.preventDefault();
            imgSrc = $(this).attr('href');
            $("#lightbox .frame img").remove();
            $("#lightbox .frame").append('<img src="' + imgSrc + '" />');
            $("#lightbox").fadeIn(500, function () {
                $('#lightbox .frame .close').click( function () {
                    $("#lightbox").fadeOut(200);
                });
            });
        });
    });
})(jQuery);

Please and thank you.

Edit: Great responses, but just to point out again - No lag in IE, only in Chrome and Firefox. What could be behind this?

Upvotes: 1

Views: 274

Answers (1)

Code Maverick
Code Maverick

Reputation: 20415

Here is an example of caching that would optimize what you have.

Will it solve everything? Not sure, but it will definitely help things.

Cached code:

var $images = $("#picbox .tiny img"),
    $main = $("#picbox .main"),
    $mainLinks = $main.find("a"),
    $lightbox = $("#lightbox"),
    $frame = $lightbox.find(".frame"),
    $frameImages = $frame.find("img");

    $images.on("click", function () 
    {
        var $this = $(this);

        $images.removeClass('selected');
        $this.addClass('selected');
        imgSrc = $this.attr('src');
        $main.css({ 'background-image': 'url(' + imgSrc + ')' });
        $mainLinks.attr('href', imgSrc);
    });

    $mainLinks.on("click", function (e) 
    {   
        e.preventDefault();

        imgSrc = $(this).attr('href');
        $frameImages.remove();
        $frame.append('<img src="' + imgSrc + '" />');
        $lightbox.fadeIn(500, function () 
        {
            $frame.find(".close").on("click", function () 
            {
                $lightbox.fadeOut(200);
            });     
        });
    }); 
});

Upvotes: 2

Related Questions