画像が背景画像として読み込まれたときの確認方法は？

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

あなたは、データ・画像を含む要素を選択して、その要素が「完全」機能が読み込まれた後、あなたの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

を見て - あなたは、コールバックとの約束を使用することができます