Javascript 检查图像存在与多个背景图像

在angular中，我有一个简单的图像加载指令，它接受图像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);

如果300x100映像不存在，它将使用100x100作为备用映像

如果确实存在300x100映像，则应在不加载100x100的情况下使用该映像

我的印象是，如果第一幅图像是404，css背景方法将不起作用，但在测试时，它似乎以我预期的方式起作用

---

与css方法相比，使用指令方法对我有什么真正的好处吗？

通过css方法，您将始终为两个图像发送两个http请求，如果没有错误，它们都将被下载

但我认为，由于阅读这种方法的简单性，它一文不值。此外，对于许多映像，回退映像通常只使用一次（因此将请求并下载一次）

这是（对我来说也不错）。和