图像闪烁，带有检查丢失图像的指令
图像闪烁，带有检查丢失图像的指令
提问于 2015-04-02 20:04:32
我已经写了一个指令，如果一个丢失的(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);
});
}
}
});..and虽然这对于只加载一次的静态页面很有效，但对于每隔几秒钟刷新一次的表中的图像检查就不太合适了。表中任何缺失的(404)图像都会在每次刷新时闪烁。
我最初让它根据实际元素的错误进行操作，但我认为如果这样，它会先尝试加载，然后失败，然后替换图像。我这样想，它至少不会先尝试将图像加载到DOM中，然后失败，而是找出代码中缺少的图像，然后分配正确的图像。但是看起来我错了！
我知道我设置的是src而不是ngSrc，我无法让ngSrc正常工作。
有人能提供任何建议/帮助吗？非常感谢。
Stack Overflow用户
发布于 2015-05-15 19:02:54
尝试此指令：
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=""/>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29412529
复制相关文章
相似问题
腾讯云开发者
