Question

我已经有两天的问题了，而我正处于突破点。我想在图像无法加载时更改图像的图像src（图像不存在）。

在以下示例中，前两个图像确实存在，但所有图像src都被错误事件替换。

var errorHandler = function(imageParsed) {
  imageParsed.src = "http://www.theemailcompany.com/wp-content/uploads/2016/02/no-image-placeholder-big-300x200.jpg";
};

var imgs = document.getElementsByTagName("img"),
  len = imgs.length;

for (var i = 0, lenImage = len; i < lenImage; i++) {
  imgs[i].onerror = errorHandler(imgs[i]);
}

我认为这是因为事件运行得太快了。所以按照this question我以事件方式分配了它

https://jsfiddle.net/zq5tsbmj/1/

var errorHandler = function(imageParsed) {
  imageParsed.src = "http://www.theemailcompany.com/wp-content/uploads/2016/02/no-image-placeholder-big-300x200.jpg";
  alert('error');
};

var imgs = document.getElementsByTagName("img"),
  len = imgs.length;

for (var i = 0, lenImage = len; i < lenImage; i++) {
  imgs[i].onerror = function() {
    errorHandler(imgs[i]);
  };
}

但即使最后一张图像失败，这也不会触发错误功能。

<小时/> 有人可以向我解释一下我究竟做错了什么。请不要提供其他问题的链接。我真的想简单地说明为什么这段代码没有完全按照预期工作，解决方案是什么，否则我担心我不会从中学习。感谢。

Answer 1

你在两种情况下都犯了错误

案例1

你的for循环应该分配函数而不是函数的返回值，使其成为

for (var i = 0, lenImage = len; i < lenImage; i++) {
  imgs[i].onerror = errorHandler;
}

Demo

案例2

Onerror是异步调用的，所以i的值必须先锁定才能将其传递给函数

for (var i = 0, lenImage = len; i < lenImage; i++) {
  imgs[i].onerror = function( i ) {
    errorHandler(imgs[i]);
  };
}

Answer 2

在我们加载页面本身的第一种情况https://jsfiddle.net/zq5tsbmj/中，下面的代码正在执行，

for (var i = 0, lenImage = len; i < lenImage; i++) {
  imgs[i].onerror = errorHandler(imgs[i]);
}

此时，errorHandler功能正在执行，所有图像都会被替换。

在我们加载页面本身的第二种情况https://jsfiddle.net/zq5tsbmj/1/中，下面的代码正在执行，

for (var i = 0, lenImage = len; i < lenImage; i++) {
  imgs[i].onerror = function() {
  errorHandler(imgs[i]);
 };
}

这里我们只是将事件与图像绑定，但它不会被执行。

要使其有效，请在所有Image标记中添加名为onerror="errorHandler(this)"的事件

<img src="http://artandcraftdays.co.uk/wp-content/uploads/2015/07/buterfly_and_drops-263x300.png" width="100" onerror="errorHandler(this)"/>
<img src="https://www.chromacolour.co.uk/media/catalog/category/art-supplies_5.jpg" width="100" onerror="errorHandler(this)"/>
<img src="https://www.exagggggmple.com/media/doesnt-exists.jpg" width="100"  onerror="errorHandler(this)"/>

并且下面只有一个function并删除其他脚本。

var errorHandler = function(imageParsed) {
  imageParsed.src = "http://www.theemailcompany.com/wp-
content/uploads/2016/02/no-image-placeholder-big-300x200.jpg";
  alert('error');
};

这将按预期工作。

图像错误事件没有预期的效果

2 个答案: