Question

是否可以在Prototype上的setAttribute上添加回调？

对于此示例，我想在alert("done !")完成时显示setAttribute()。

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

Answer 1

可能不是黄金解决方案，但

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

function imageCallback() { ... }

如果您对jQuery感兴趣，可以使用名为 waitforimages 的插件。

Answer 2

你可以，但我不推荐它。

(function() {

    var elementSetAttribute = Element.prototype.setAttribute;

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

        return elementSetAttribute.apply(this, arguments);
    }

})();

jsFiddle

当您执行whateverFunctionYouWant()等操作时，会调用document.links[0].setAttribute('href', '/')。

您似乎希望在更改src元素的img属性并且新资源已加载时调用回调...

(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

你可以在这里使用第三个参数重载setAttribute()，这是一个回调。

在我看来和经验中，我会创建一个不同的功能而不是这样做。修改原型是一回事，但是重载原生DOM方法以做额外的事情听起来像是在招惹麻烦，特别是一旦开发人员不熟悉你所做的事情就会看到代码。

不用说，如果你想让后一个例子工作＆lt; IE9，使用attachEvent()后备来添加事件监听器。

如何为setAttribute添加回调？

2 个答案: