ajax 내용을 표시 할 때 이미지가로드되지 않습니다.

Question

jquery.load를 사용하여 다른 페이지에서 html 조각을 가져 왔습니다. 조각에는 꽤 큰 배경 이미지가 포함되어 있습니다. 로드 기능이 끝나고 콜백이라고 부르면 페이지에 블록을 표시하는 조각을 설정합니다. 문제는 html로로드 할 때 백그라운드 이미지없이 새로운 내용을 볼 수 있다는 것입니다. 배경 이미지가 나중에로드됩니다.

아약스 콘텐츠를 표시하기 전에 이미지가로드되는지 확인하는 좋은 방법은 무엇입니까? 당신은이 작업을 수행 할 수

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.