이미지가 존재하는지 확인하는 중 여러 배경 이미지가 있습니다

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에서 여러 배경 이미지는 같은 방법으로 위를 처리하는 것 다음 300x100의 이미지가 존재하지 않는

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

경우는 대체로 100 × 100을 사용합니다.

300x100 이미지가있는 경우 100x100을로드하지 않고 이미지를 사용해야합니다.

첫 번째 이미지가 404 일 경우 CSS 배경 방법이 작동하지 않는다고 생각했지만 테스트 할 때는 예상대로 작동하는 것처럼 보입니다.

css 메서드에서 지시문 메서드를 사용하는 데 나에게 실제적인 이점이 있습니까?

Answer 1

비아 CSS 방식을 사용하면 두 개의 이미지에 대해 두 개의 HTTP 요청을 항상 보내고 오류가 없으면 둘 다 다운로드됩니다.

그러나이 방법을 읽는 단순성으로 인해 가치가 있다고 생각합니다. 또한 대체 이미지는 한 번에 여러 이미지에 사용되므로 (한 번 요청되고 다운로드됩니다).

여기에 browsers support (나에게 좋은 점이 많습니다.)입니다. 그리고 related question.