이미지가 배경 이미지로로드 될 때 확인하는 방법은 무엇입니까?

Question

이 코드를 사용하여 페이지가 각각 .item에로드 된 후 data-image을 배경 이미지로 배치해야합니다. 문제는 #loadingsvg이 (적어도) 첫 번째 이미지가로드 된 경우에만 페이드 아웃해야한다는 것입니다. 어떻게 확인할 수 있습니까?

<div id="myCarousel"> 
    <div class="item" data-image="asdf.jpg"></div> 
    <div class="item" data-image="asdf2.jpg"></div> 
    <div class="item" data-image="asdf23.jpg"></div> 
</div> 

jQuery(window).load(function() { 
    jQuery('#myCarousel .item').each(function(){ 

     // Take data-image 
     var $this = jQuery(this), 
     src = $this.data('image'); 

     if (typeof src !== "undefined" && src != "") { 
      // Set as background image 
      $this.css('background', 'url(' + src + ')'); 
     } 

     jQuery('#loadingsvg').fadeOut(); 

    }); 

}); 

Answer 1

데이터 이미지가 포함 된 요소를 선택하고 해당 요소가 'complete'함수로로드 된 후 jquery 코드를 실행할 수 있습니다. 예를 들어

는 :

if ($("#image").complete) { yourFunction(); } 

이제 코드에서, 당신은 CSS를 변경 (애니메이션) 후 코드를 실행합니다. 덜 우아한 해결책을

if (typeof src !== "undefined" && src != "") { 
      // Set as background image 
      $this.css('background', 'url(' + src + ')').promise().done(function(){ 
        jQuery('#loadingsvg').fadeOut();; 
}); 

을 또는 : 당신이 페이드 아웃하기 전에이 같은 시간 제한을 추가 할 수 있습니다

setTimeout(function(){jQuery('#loadingsvg').fadeOut();}, 1000); 

귀하의 경우에는 here

봐 - 당신은 콜백 약속을 사용할 수 있습니다