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);

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

如果300x100图像确实存在，则应使用该图像而不加载100x100。

我的印象是，如果第一张图片是404，那么css背景方法将不起作用，但是当测试时，它似乎按照我预期的方式工作。

使用指令方法比css方法对我有什么好处吗？

Answer 1

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

但我认为由于阅读此方法的简单性，它没有任何价值。此外，后备图像常用于许多图像（因此它将被请求并下载一次）。

这是browsers support（这对我来说非常好）。并related question。

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

1 个答案: