jQuery Ajax .load() slow in Safari only, fine in other browsers

Question

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

Hi. On the page above I'm loading html content into a div on click using .load(), using this line:

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

The first time you click a thumbnail, you get a slight pause as the gallery loads, then if you go back into the gallery after exiting it, it loads instantly as the images are cached. This is the case in Firefox and Chrome, but not in Safari where there is always a slight pause and a pulse of the loading graphic, even if the images have been cached. I can't figure out why this is. I think it also gives the pause in IE.

The .load() is fired in a hash change function. There's probably a lot of irrelevant code here but this is a snippet of what I'm using:

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

});

Yeah cached I think. To be honest, I think the slowness I'm perceiving might be more to do with CPU speed, rather than code, as it varies between computers. — user3296711, Feb 24 '14 at 11:59

score 0 · Answer 1 · edited May 23 '17 at 12:20

0

Here is how you control the caching with jquery. Just add this code before your load function.

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

Take a look at this SO.

edited May 23 '17 at 12:20

Community

1
1

answered Feb 11 '14 at 11:30

vlio20

8,955
18
95
180

Thank, I'm gonna give this a go. – user3296711 Feb 24 '14 at 11:59
I didn't notice any change but the problem seems to have gone away independently. Maybe a Safari update fixed it? – user3296711 Mar 07 '14 at 09:53

jQuery Ajax .load() slow in Safari only, fine in other browsers

1 Answers1