javascript - 检查图像是否存在与多个背景图像

Question

在 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 方法对我有什么真正的好处吗？

Answer 1

通过 css 方法，你总是会为两张图片发送两个 http 请求，如果没有错误，它们都会被下载。

但由于阅读此方法的简单性，我认为它一文不值。此外，后备图像通常用于许多图像一次(因此将被请求和下载一次)。

这里是 browsers support (这对我来说非常好)。和 related question .