Javascript 使用jQuery.error（）加载img标记不存在时的替换图像'；不能正确加载

我只是想知道为什么以下内容似乎对我不起作用（使用Chrome和FF进行了尝试）：

//将断开的图像更改为占位符图像
$（'img'）。错误（函数（）{
$（this.attr（'src'，'http://placehold.it/100');
});

---

以下是已触发的

onerror

事件，因此您需要创建一个新映像并侦听该映像上的错误事件：

$('img').each(function() {
    var img  = new Image(),
        self = this;

    img.onerror = function(){
        $(self).prop('src', 'http://placehold.it/100');
    }

    img.src = this.src;
});

---

这应该能回答你的问题

必须在浏览器触发错误事件之前附加事件处理程序，这就是示例在附加处理程序后设置src属性的原因。此外，当本地提供页面时，错误事件可能无法正确触发；错误依赖于HTTP状态代码，如果URL使用file:protocol，则通常不会触发该错误

---

我猜，当您设置src时，它会被触发，而不是针对html中有错误src的图像。这就是为什么该解决方案有效的原因——这似乎有效，但我仍在尝试理解它。创建一个全新的图像对象与原始img标记有什么关系？此新图像是否位于原始损坏图像的顶部？@skube-它不存在，它根本没有附加到DOM中，它只是用于检查图像是否可以加载。因此，新图像对象尝试加载每个实际图像src，然后如果遇到

onerror

，它会将实际图像的src设置为占位符？我想让我困惑的是顺序。我认为至少在我看来，

img.src=this.src

应该在函数表达式之前。不应该，设置源代码是触发加载的原因，因此在设置onload或onerror处理程序之前设置源代码可能会导致这些事件处理程序在图像加载或错误过快时无法启动，因此，您应该始终在设置事件处理程序之后设置源。

$('img').each(function() {
    var img  = new Image(),
        self = this;

    img.onerror = function(){
        $(self).prop('src', 'http://placehold.it/100');
    }

    img.src = this.src;
});