イメージが存在するか複数のバックグラウンドイメージがあるか

Question

私は単純なイメージローディングディレクティブを持っています。イメージディレクティブは存在するかどうかを確認するイメージURLを取り込み、正常に読み込まれたイメージかフォールバックをバックグラウンドイメージとして設定します。

return { 
    restrict: 'A', 
    scope: { 
     imageLoad: '@' 
    }, 
    link: function(scope, element, attrs) { 

     var fallback = 'fallbackimg.jpg'; 

     attrs.$observe('imageLoad', function (url) { 

      var image = new Image(); 

      image.onerror = function() { 
       setBackgroundImage(fallback); 
      }; 

      image.onload = function() { 
       setBackgroundImage(url); 
      }; 

      image.src = url; 
     }); 

     function setBackgroundImage(url) { 
      element.css({ 
       'background-image': 'url(' + url + ')' 
      }); 
     } 

    } 
}; 

しかし、CSSの複数の背景画像は、同じ方法で上記を扱うように見える：

background: url(http://placehold.it/300x100), url(http://placehold.it/100x100); 

300×100の画像が存在しない場合、それはフォールバックとして100×100を使用します。

300x100イメージが存在する場合は、100x100をロードせずにイメージを使用する必要があります。

私は、最初のイメージが404になっていればCSSのバックグラウンドメソッドが機能しないと思っていましたが、テストすると予想通りに動作するように見えます。

私には、cssメソッドでディレクティブメソッドを使用すると本当に有益ですか？

Answer 1

Via cssメソッドを使用すると、2つの画像に対して2つのhttpリクエストが送信され、エラーがなければ両方がダウンロードされます。

しかし、私はこの方法を読むのが簡単だから価値があると思います。さらに、フォールバックイメージは、多くのイメージで一度だけ使用される（したがって、一度要求され、ダウンロードされる）。

ここにはbrowsers support（私にとってはかなり良い）です。そしてrelated question。