jQuery在Firefox和Chrome上严重滞后，但不是IE

Question

如标题中所述，此页面最少的jQuery网站在Chrome和Firefox上却出现了疯狂的滞后，但在IE10上却没有 。 我的确意识到MS以10扩大了他们的比赛，但是为了甜蜜的主人，这有什么关系？

我读过，Chrome有时会在div hide（）s和show（）s上表现不佳，但是我使用的是fadeIn（）和fadeOut（），似乎缺少了一些东西。

我为此创建了一个JSFiddle，以防万一我做错了什么。

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

谢谢，麻烦您了。

编辑：大的反应，只是再次指出-无滞后于IE浏览器 ，仅适用于Chrome和Firefox。 这可能是什么呢？

Answer 1

这是一个可以优化您所拥有内容的缓存示例。

它会解决一切吗？ 不确定，但是肯定会有所帮助。

缓存的代码：

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