8

我正在尝试编写一个可以执行以下操作的库。

当库包含在头部中时，它将更改 HTMLImageElement 原型，以便用户碰巧在其 HTML 中使用或他们在 javascript 中动态创建的任何图像标记都将具有由我的库定义的默认 onerror 函数。

这样做的结果是，如果任何用户图像由于指向错误的 url 而无法加载，我的库将以优雅的方式处理它。

我正在尝试以下作为实验，

var img = document.createElement('img');
  img.__proto__.onerror = function() {
    alert('hi');
  };
  document.body.innerHTML = '<img id="foo" src="bar.png"/>'

文件 bar.png 不存在且不起作用的地方。

但是，如果我只是做类似的事情

  document.body.innerHTML = '<img id="foo" src="bar.png" ' +
    'onerror="this.src = MODIT.getImage(\'blackTile\').src;"/>';

效果很好。这里 MODIT.getImage() 是一个返回图像元素的函数。您可以在此处使用此代码：https ://mod.it/ciR_BxqJ/

我正在尝试做的事情可能吗？或者有没有办法全局捕获所有 403 GET 错误并以某种方式使用 javascript 处理它们？

谢谢！

4

2 回答 2

7 
window.addEventListener("error", function(e) {
    if ( e && e.target && e.target.nodeName && e.target.nodeName.toLowerCase() == "img" ) {
        alert( 'Bad image src: ' + e.target.src);
    }
}, true);

见：http: //jsfiddle.net/Vudsm/

于 2013-08-09T17:54:06.127 回答
2

重要提示： 弗拉德的解决方案绝对更简单！但是，如果您想在不使用事件冒泡的情况下将事件侦听器附加到任何新添加的元素（将事件侦听器附加到文档），请继续阅读。

在阅读了以下问题后，我切换到了一个完全不同的解决方案。

似乎无法覆盖事件侦听器（据我到目前为止的研究）。

实际解决方案：DOM 突变事件

创建MutationObserver后，监听添加的节点，然后检查它们是否是图像，然后动态添加错误处理程序。

jsFiddle

function imgError() {
    alert("Failed to load image!");
}

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

var config = {
    childList: true
};

var observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
        var addedNodesCount = mutation.addedNodes.length;
        for (var i=0; i<addedNodesCount; i++) {
            var node = mutation.addedNodes.item(i);

            if (node.tagName == "IMG") {
                node.addEventListener("error", imgError);
            }
        }
    });
});

// pass in the target node, as well as the observer options
observer.observe(document.body, config);

document.body.innerHTML = '<img id="foo" src="bar.png"/>'

您还可以使用IE 9 也支持的旧事件： DOMNodeInserted

jsFiddle

function imgError() {
    alert("Failed to load image!");
}

document.body.addEventListener("DOMNodeInserted", function (evt) {
    if (evt.target.tagName == "IMG") {
        evt.target.addEventListener("error", imgError);
    }
});

document.body.innerHTML = '<img id="foo" src="bar.png"/>'
于 2013-08-09T17:43:21.533 回答