Checking an image exists vs multiple background images

Question

In angular I have a simple image loading directive, which takes in an image url checking if it exists, it sets either the image it successfully loaded or a fallback as a background image.

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 + ')'
            });
        }

    }
};

however, multiple background images in css seem to handle the above in the same way:

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

if the 300x100 image doesn't exist it will use the 100x100 as a fallback.

if the 300x100 image does exist, it should use that without loading the 100x100.

I was under the impression that the css background method would not work if the first image was to 404, but when testing it seems to work in the way i'd expect.

Is there any real benefit to me using the directive method over the css method?

Answer 1

Via css method you'll always sent two http requests for two images and they both will be downloaded if no error.

But I think it worth nothing due to simplicity of reading this method. Moreover, fallback images are common used once for many images (so it will be requested and downloaded once).

Here is browsers support (which is pretty good as for me). And related question.