jQuery Ajax .load（）只在Safari中緩慢，在其他瀏覽器中很好

Question

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

嗨。在網頁上面我加載HTML內容轉換成使用.load點擊一個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。