Firefox和Linux上的严重jQuery延迟Chrome，不是IE浏览器

Question

正如标题中所述，这个只有最小jQuery的单页网站遭受Chrome和Firefox的疯狂滞后，但IE10上的不。我确实认识到MS用10加强了他们的比赛，但是为了甜蜜的领主，这是什么交易？

我已经读过，有时候Chrome会使用div hide（）和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

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

它会解决所有问题吗？不确定，但肯定会有所帮助。

缓存代码：

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