Question

我看到一个代码来制作一个默认图像当加载图像时出现404错误时显示。

像这样：

<img src="img/article_1744408190.jpg" onerror="this.src = 'ImgAlt.jpg'">

但它必须从每个Image调用onerror函数。但是如何实现A方法来捕获Javascript（或JQuery）的所有错误触发器并单独将图像SRC设置为default.jpg。发布示例代码将非常有用

Answer 1

您可以在window（global error handling）上设置错误事件监听器，并检查他的目标是否是图片，如果是，请更改其src：

window.addEventListener("error", function(e) {              // when an error happens
    if(e.target.tagName.toLowerCase() === "img") {          // if the target is an image
        e.target.src = "default.jpg";                       // then change its src to whatever you want
    }
}, true);

window.addEventListener("error", function(e) {
    if(e.target.tagName.toLowerCase() === "img") {
        e.target.src = "http://via.placeholder.com/200/ff0000/000000?text=404";
    }
}, true);

<img src="http://example.com/nonExistingImage.jpg">
<img src="http://via.placeholder.com/200/00ff00/000000?text=OK">

Answer 2

要执行此操作，您需要挂钩error事件，然后返回并检查图像以查看其中是否有任何已错误（在您挂钩事件之前）处理它们。沿着这些方向：

var defaultImage = "ImgAlt.jpg";
$("img").one("error", function() {
    this.src = defaultImage;
}).each(function() {
    if (this.complete && !this.naturalWidth) {
        this.src = defaultImage;
        $(this).off("error");
    }
});

当图像被破坏时，

complete将为true。 naturalWidth将是图片的自然宽度，如果它被破坏，则为0或undefined。可悲的是，后面的检查只是了解图像被破坏的唯一方法，因为事件发生后they lack任何（显然需要的）明显错误指示。（naturalWidth is supported by all modern browsers以及IE9-IE11;真正过时的IE8不支持它。）

请注意，您想要加载的图像实际上都不是零宽度。似乎是一个安全的假设。： - ）

Javascript：捕获所有OnError

2 个答案: