jQuery Ajax .load() 仅在 Safari 中很慢，在其他浏览器中很好

Question

http://katie-scott.com/personal-work/#work

嗨。在上面的页面上，我使用 .load() 将 html 内容加载到 div 中，使用这一行：

$("div.project_wrapper").load(url, function() {

第一次单击缩略图时，在加载图库时会稍有暂停，然后如果您在退出图库后返回图库，它会在缓存图像时立即加载。在 Firefox 和 Chrome 中就是这种情况，但在 Safari 中却不是这样，即使图像已被缓存，加载图形总是会有轻微的暂停和脉冲。我不明白为什么会这样。我认为它也让 IE 暂停。

.load() 在哈希更改函数中触发。这里可能有很多不相关的代码，但这是我正在使用的 sn-p：

$(function() {
$(window).hashchange(function() {
    hash = location.hash;
    homehash = ["#work", "#", ""];
    $("div.pulser_inner").removeClass("orange blue green purple mustard");
    $("div.pulser_inner").addClass(RandomColor);
    if (jQuery.inArray(hash, homehash)>-1) {
        $("body").removeClass("noscroll");
        $("div.project_wrapper_holder").stop().fadeOut("slow", function() {
            $(".navbar").stop().fadeIn("slow");
            $("div.project_wrapper").stop().hide(function() {
                $("div.project_wrapper").empty()
            })
        });
        document.title = "Katie Scott – Personal Work"
    } else {
        $("div.project_wrapper").empty();
        $("div.project_wrapper").html("");
        $link = $('a[href="' + hash + '"]');
        url = $link.data("href");
        $("div.project_wrapper").fadeOut(0);
        $(".pulser_outer").fadeIn();
        $(function t() {
            $(".pulser_inner").fadeTo(300, 0).fadeTo(300, 1, t)
        });
        $("div.project_wrapper_holder").fadeIn("slow", function() {
            $(".navbar").stop().fadeOut(0)
        });
        $("body").addClass("noscroll");
        $(".thumb_ks_overlay").stop().delay(300).fadeTo(300, 0);
        $(".thumb_ks_a").stop().delay(300).hide();
        function e(e) {
            e = e.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
            console.log(e);
            console.log(location.search);
            var t = new RegExp("[\\?&]" + e + "=([^&#]*)"), n = t.exec(location.search);
            return n == null ? "" : decodeURIComponent(n[1].replace(/\+/g, " "))
        }
        $("div.project_wrapper").load(url, function() {
            var e = hash.replace(/^#/, "");
            var t = $(".bxslider li");
            var n;
            if (e != "") {
                var r = t.filter("." + e);
                n = $(t).index(r[0])
            } else {
                n = 0
            }
            $(".bxslider").bxSlider({
                startSlide: n,
                pager: false,
                infiniteLoop: true,
                hideControlOnEnd: true,
                preventDefaultSwipeY: true,
                preloadImages: 'visible',
                video: true,
                captions: true,
                onSliderLoad: function() {
                    $(".pulser_outer").fadeOut();
                    $(".pulser_inner").clearQueue().fadeTo(300, 1).stop();
                    $(".bx-prev").removeClass("disabled");
                    $(".bx-next").removeClass("disabled");
                    $(".bx_nav_inner").fadeTo(600, 1);
                    $("a.bx-prev").addClass(projectColourSwatch);
                    $("a.bx-next").addClass(projectColourSwatch);
                    $("a.bx-prev.random").addClass(StaticColor);
                    $(".bx-viewport").fadeTo(300, 1);
                    $("a.bx-next.random").addClass(StaticColor)
                }
            });
            $("div.project_wrapper").fadeIn("slow", function() {});
            $(".bx-loading").addClass(projectColourSwatch);
            $(".bx-loading.random").addClass(StaticColor);
            $(function() {
                $(".info_box_button").click(function() {
                    $(".info_box_project").fadeIn("");
                    $(".info_box_project").css({
                        display: "table"
                    });
                    $(".info_box_button").fadeOut();
                    $(".back_to_grid").fadeOut();
                    $(".bx-controls").fadeOut()
                })
            });
            $(function() {
                $(".close_info").click(function() {
                    $(".info_box_project").fadeOut("");
                    $(".info_box_button").fadeIn();
                    $(".back_to_grid").fadeIn();
                    $(".bx-controls").fadeIn()
                })
            })
        })
    }
});
$(window).hashchange()

});

Answer 1

以下是使用 jquery 控制缓存的方法。只需在 load 函数之前添加此代码即可。

$.ajaxSetup 
({
    // Disable or Enable caching of AJAX
    cache: false // or true
});

看看thisSO。