Question

Is it possible to add a callback on setAttribute on Prototype ?

For this example, I would like to show an alert("done !") when setAttribute() is finished.

img.setAttribute("src", "http://blabla.com/c.jpg");

Answer 1

You could, but I wouldn’t recommend it.

(function() {

    var elementSetAttribute = Element.prototype.setAttribute;

    Element.prototype.setAttribute = function() {
        whateverFunctionYouWant.call(this);

        return elementSetAttribute.apply(this, arguments);
    }

})();

jsFiddle.

This will call whateverFunctionYouWant() when you do something such as document.links[0].setAttribute('href', '/').

You seem to want this to call a callback when you change the src attribute of img elements and the new resource has loaded…

(function() {

    var HTMLImageElementSetAttribute = HTMLImageElement.prototype.setAttribute;

    HTMLImageElement.prototype.setAttribute = function(attribute, value) {
        var image;

        if (attribute == 'src') {
            image = new Image;
            image.addEventListener('load', loaded, false);
            image.src = value;
        }

        return HTMLImageElementSetAttribute.apply(this, arguments);
    }

})();

jsFiddle.

You could overload setAttribute() here with a third parameter, which would be the callback.

In my opinion and experience, I’d create a different function instead for doing this. Modifying prototypes is one thing, but overloading native DOM methods to do extra things sounds like inviting trouble, especially once a developer unfamiliar with what you’ve done looks at the code.

It goes without saying that if you want the latter example to work < IE9, use the attachEvent() fallback for adding the event listener.