带有检查丢失图像的指令的图像闪烁

Question

我已经编写了一个指令，如果它不存在，它将用占位符图像替换丢失的 (404) 图像，就像这样......

app.directive('onErrorSrc', function($q) {
    return {
        link: function(scope, element, attrs) {

            function isImage(src) {

                var deferred = $q.defer();

                var image = new Image();
                image.onerror = function() {
                    deferred.reject(false);
                };
                image.onload = function() {
                    deferred.resolve(true);
                };
                image.src = src;

                return deferred.promise;
            }

            isImage(attrs.myNgSrc).then(function(test) {
                attrs.$set('src', attrs.myNgSrc);
                console.log("IS IMAGE");
            }, function (err) {
                console.log("IMAGE ERROR");
                attrs.$set('src', attrs.onErrorSrc);
            });
        }
    }
});

..虽然这对于加载一次的静态页面非常有效，但对于检查每隔几秒刷新的表格中的图像来说并不完全正确。表格中的任何缺失 (404) 图像都会导致每次刷新时闪烁。

我最初让它对实际元素的错误起作用，但我认为那样，它会先尝试加载，失败，然后替换图像。我是这样想的，它至少不会尝试先将图像加载到 DOM 中，然后失败，而是找出代码中缺少它，然后分配正确的图像。看来我错了！

我知道我设置的是src 而不是ngSrc，我无法让ngSrc 工作。

谁能提供任何建议/帮助？非常感谢。

Answer 1

试试这个指令：

app.directive('checkImage', function ($http) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            attrs.$observe('ngSrc', function (ngSrc) {
                $http.get(ngSrc).success(function () {

                }).error(function () {
                    //Image doesn't exists!. To do anything...
                });
            });
        }
    };
});

HTML：

<img check-image ng-src="{{urlImg}}/>

---

或者你可以试试这个错误处理指令：

app.directive('errSrc', function () {
    return {
        link: function (scope, element, attrs) {
            element.bind('error', function () {
                if (attrs.src != attrs.errSrc) {
                    attrs.$set('src', attrs.errSrc);
                }
            });
        }
    }
});

HTML：

<img ng-src="{{urlImg}} err-src=""/>