當我顯示ajax內容時未加載圖像

Question

我正在使用jquery.load從另一個頁面拉入html片段。該片段包含相當大的背景圖像。一旦加載函數完成並調用它的回調函數，我將片段設置爲在頁面中顯示塊 - 問題在於，當加載html時，我看到沒有背景圖像的新內容....稍後加載背景圖像。

在顯示ajax內容之前確保圖像加載的最佳方法是什麼？

Answer 1

你可以這樣做......

$('button').click(function() { 
    $('#element').load('/echo/html/', function(responseText) { 

     // For testing 
     responseText = '<link href="http://sstatic.net/stackoverflow/all.css?v=ded66dc6482e" rel="stylesheet" type="text/css" /><div class="ac_loading" style="width: 200px; height: 200px;">ABC</div>'; 


     var element = $(this), 
      responseTemp = $('<div />').hide().html(responseText).appendTo('body'), 
      styles = responseTemp.find('link[type="text/css"]'), 
      stylesHook = $('head link[type="text/css"]:last'); 

     if (stylesHook.length === 0) { 
      stylesHook = $('head *:last-child'); 
     } 

     styles.insertAfter(stylesHook); 

     preloadSrc = responseTemp.find('div').css('backgroundImage').replace(/^url\(["']?(.*?)["']?\)$/, '$1'), image = new Image(); 

     image.onload = function() { 
      styles.add(responseTemp).remove(); 
      element.html(responseText); 
     } 

     image.src = preloadSrc; 
    }); 
}); 

jsFiddle。