jQuery ajax沒有預先加載圖像

我點擊一個畫廊的標題時會顯示一個畫廊列表（帶圖像的HTML）。jQuery ajax沒有預先加載圖像

當內容拉入它預加載的HTML，但不是圖像，任何想法？

這是JavaScript我正在使用：

$('#ajax-load').ajaxStart(function() { 
    $(this).show(); 
}).ajaxStop(function() { $(this).hide();}); 


// PORTFOLIO SECTION 
    // Hide project details on load 
    $('.project > .details').hide(); 
    // Slide details up/down on click 
    $('.ajax > .header').click(function() { 
     if ($(this).siblings(".details").is(":hidden")) { 
     var detailUrl = $(this).find("a").attr("href"); 
     var $details = $(this).siblings(".details"); 

     $.ajax({ 
      url: detailUrl, 
      data: "", 
      type: "GET", 
      success: function(data) { 
        $details.empty(); 
        $details.html(data); 
        $details.find("ul.project-nav").tabs($details.find(".pane"), {effect: 'fade'}); 
        $details.slideDown("slow"); 
      }}); 
     } 
     else {$(this).siblings(".details").slideUp();} 
     return false; 
    });

你可以看到這個證明在http://www.georgewiscombe.com

提前感謝！

來源

2010-05-11 George Wiscombe

$.ajax不會爲您做任何圖像預加載。它只是從指定的網址中檢索數據。在你的情況下，你將數據附加爲html（$details.html(data)）。然後瀏覽器會看到該html中有圖像並加載它們。

作爲一種變通方法我可以建議下列之一：

使用CSS背景代替（優選與CSS子畫面）
預載所有參考的圖像（here是一個可行的解決方案）

來源

2010-05-11 09:34:49

嗨，感謝您的回覆，我真的不想使用CSS背景圖像，它不是很容易訪問，並可能成爲一個噩夢來維護。第二個選項看起來不錯，不知道如何將其與我的代碼整合 - 幫助表示讚賞:) – 2010-05-11 10:34:29

包括從該博客帖子實施preloadImages例程。在$（document）.ready（）中調用preloadImages例程並指定要加載的圖像的url。 – 2010-05-11 12:32:02

jQuery ajax沒有預先加載圖像

回答

相關問題