Question

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

您好。在上面的页面中，我使用.load（）将html内容加载到div中，使用以下行：

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

第一次单击缩略图时，会在画廊加载时稍微停顿一下，然后如果退出后再返回库中，则会在图像缓存时立即加载。在Firefox和Chrome中就是这种情况，但在Safari中，即使图像已被缓存，也总会有轻微的暂停和加载图形的脉冲。我无法弄清楚为什么会这样。我认为这也让IE暂停了。

.load（）在散列更改函数中触发。这里可能有很多不相关的代码，但这是我正在使用的代码片段：

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

看看this SO。

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

1 个答案: