当 url 返回 404 时交换图像不适用于 AJAX答案

【问题标题】：Swapping image when url returns 404 not working with AJAX当 url 返回 404 时交换图像不适用于 AJAX
【发布时间】：2016-06-04 09:17:07
【问题描述】：

当图像的 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

【问题讨论】：

发布整个代码，如何将 imageOnError 函数附加到图像对象？
stackoverflow.com/a/17636872/2020002你检查了吗？
所以这是有角度的？ imageOnError在哪里定义的，全局函数？
@dfsq 为什么会有角度？这看起来像任何带有小胡子样式模板的代码（可以是普通的小胡子、nunjucks、棱角分明的，随你选）
嗯，你间歇性地得到它的事实意味着你遇到了一个种族问题，图像在 javascript 之前加载......你在哪里/如何包含这个函数？

标签： javascript ajax image fallback

【解决方案1】：

当浏览器得到这个时：

<img src="http://ip.dlron.us/img.jpg"
     onerror="return imageOnError(this);">

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

因此，您的imageOnError(img) 实现应在 HTML 中出现在使用它的第一个图像之前。

【讨论】：

这似乎是问题所在，但页面（图像内容）是由 AJAX 和 HTML 生成的。
您能否详细说明“页面（图像内容）”和“图像内容由 AJAX 和 HTML 生成”？
我认为这个问题与 AJAX 调用有关，可能是因为当 AJAX 呈现内容时，imageOnError function 还没有准备好或其他原因。

【解决方案2】：

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

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

【讨论】：