1

如标题所述，这个只有 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 中。这背后可能是什么？

4

1 回答 1

2

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

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

缓存代码：

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);
            });     
        });
    }); 
});
于 2013-04-17T22:36:47.647 回答