Question

当图像的URL返回404时，我有以下函数作为回退。该函数应该在AJAX之后发生。因此，当制作AJAX并且URL返回404时，图像将替换损坏的图像。此功能适用于Safari和Firefox，但不适用于Chrome。

当它无法在Chrome中运行时，控制台会说：

未定义imageOnError。

    function imageOnError(img) {
       img.onerror = ' ';
       img.src = "http://v.images.boldride.com/vorsteiner/2012/vorsteiner-bmw-m3-gts5.1471x972.Jul-11-2012_13.02.33.232886.jpg";
       return true;
    }

有什么想法吗？

以下是JSFiddle

Answer 1

当浏览器获得此信息时：

imageOnError(img)

图片的URL可能已经针对存在（和结果缓存）进行了测试，因此浏览器可以立即告知图像不可用并调用您的onerror处理程序。

因此，您的{{1}}实现应在使用它的第一个图像之前出现在HTML中。

Answer 2

我最终使用jQuery来解决这个问题。它实际上比直接在标记上调用onerror事件更好。谢谢大家的帮助。

$(errorImage).on('error', function(){
  $(this).attr('src', 'broken-image-url');
});

当url返回404不使用AJAX时交换图像

2 个答案: