Firefox上的jQuery严重滞后&；铬，但不是

正如标题中所述，这个只有一页的、jQuery最少的网站在Chrome和Firefox上出现了疯狂的延迟，但在IE10上却没有。我确实意识到MS以10分提高了他们的水平，但看在上帝的份上，这是怎么回事

我曾读到，Chrome有时会带有div hide（）和show（）的标签，但我使用的是fadeIn（）和fadeOut（），似乎我遗漏了一些东西

我已经为它创建了一个JSFIDLE，以防我做了一些可怕的错误

（函数（$）{
$（文档）.ready（函数（）{
$（“#picbox.tiny img”）。单击（函数（）{
$（“#picbox.tiny img”）.removeClass（'selected'）；
$（this.addClass（'selected'）；
imgSrc=$（this.attr（'src'）；
$（“#picbox.main”）.css({
'背景图像'：'url（'+imgSrc+'）'
});
$（“#picbox.main a”）.attr（'href'，imgSrc）；
});
$（“#picbox.main a”）。单击（函数（e）{
e、 预防默认值（）；
imgSrc=$（this.attr（'href'）；
$（“#lightbox.frame img”）.remove（）；
$（“#lightbox.frame”）.append（“”）；
$（“#lightbox”）.fadeIn（500，函数（）{
$（'#lightbox.frame.close'）。单击（函数（）{
$（“#灯箱”）。淡出（200）；
});
});
});
});
})（jQuery）；

谢谢你

编辑：反响不错，但我要再次指出，IE没有滞后，只有Chrome和Firefox。这背后可能是什么？

它能解决一切问题吗？不确定，但肯定会有帮助

缓存代码：

var$images=$（“#picbox.tiny img”），
$main=$（“#picbox.main”），
$mainLinks=$main.find（“a”），
$lightbox=$（“#lightbox”），
$frame=$lightbox.find（“.frame”），
$frameImages=$frame.find（“img”）；
$images.on（“单击”），函数（）
{
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（“单击”，函数（e）
{   
e、 预防默认值（）；
imgSrc=$（this.attr（'href'）；
$frameImages.remove（）；
$frame.append（“”）；
$lightbox.fadeIn（500，函数（）
{
$frame.find（“.close”）。打开（“单击”，函数（）
{
$lightbox.fadeOut（200）；
});     
});
}); 
});

即使我删除了所有JavaScript，在查看顶部图像时也会出现严重的延迟。你的一个插件玩得不好。首先，你需要缓存那些jQuery对象。你不必要地一次又一次地创建它们。Scott-我仍然是一个JS noob，所以我不遵循你的缓存建议。我会发布一个答案，这样你就可以看到缓存部分。虽然这不是一个解决问题的方法（显然），但这太棒了。谢谢你，伙计，帮了大忙，而且干净多了。

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