I am trying to write a library that would do the following.

When the library is included in the head, it would alter the HTMLImageElement prototype such that any image tag that the user happened to use in their HTML or that they create dynamically in javascript would have a default onerror function that is defined by my library.

The result of this would be that if any of the users images failed to load because they pointed to a bad url my library would handle it in a graceful way.

I am trying the following just as an experiment,

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

where the file bar.png does not exist and it does not work.

However if I just do something like

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

that works fine. Here MODIT.getImage() is a function that returns an image element. You can play with this code here: /

Is what I'm trying to do possible? Alternatively is there a way to globally catch all 403 GET errors and handle them with javascript in some way?

Thanks!

I am trying to write a library that would do the following.

When the library is included in the head, it would alter the HTMLImageElement prototype such that any image tag that the user happened to use in their HTML or that they create dynamically in javascript would have a default onerror function that is defined by my library.

The result of this would be that if any of the users images failed to load because they pointed to a bad url my library would handle it in a graceful way.

I am trying the following just as an experiment,

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

where the file bar.png does not exist and it does not work.

However if I just do something like

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

that works fine. Here MODIT.getImage() is a function that returns an image element. You can play with this code here: https://mod.it/ciR_BxqJ/

Is what I'm trying to do possible? Alternatively is there a way to globally catch all 403 GET errors and handle them with javascript in some way?

Thanks!

• javascript
• dom

Share Follow edited Aug 9, 2013 at 17:11 asutherland asked Aug 9, 2013 at 17:06 asutherlandasutherland 2,96944 gold badges3838 silver badges5151 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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);

See: http://jsfiddle/Vudsm/

Important note: Vlad's solution is definitely simpler! But if you want to attach an event listener to any newly added element without using event bubbling (attaching event listeners to the document), read on.

---

After reading the following questions, I switched to a pletely different solution.

• Modify prototypes of every possible DOM element

• JavaScript: override Date.prototype.constructor

It seems that one cannot override an event listener (as far as I have researched until now).

The actual solution: DOM mutation events

After creating a MutationObserver, one listens for added nodes, then checks whether they are images and one dynamically adds an error handler.

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"/>'

---

You can also use the old DOMNodeInserted event which is also supported by IE 9:

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"/>'