javascript - Javascript - 将加载事件映射到相应的图像 src

Question

我有一个形象，src我正在迅速改变它。我有一个附加到图像元素load事件的处理程序。有没有办法在每次加载图像时都无需实例化新的图像对象来获取与被触发src的事件相对应的信息？load

Answer 1

你可能有这样的事情：

function eventHandler(event) {
  // event.currentTarget holds your element, query it to get info
}

作为绑定到事件的函数，如果您使用 jQuery，您可以执行类似的操作

$(event.currentTarget).attr('src');

获取当前src.

Answer 2

我想不可能触发onload与 对应的某个处理程序src，但是您可以将（所有）以前src的（s）存储到图像中，然后选择要执行的函数。像这样的东西：

window.onload = function () {   
    var n,
        images = document.images,
        imgOnload = function (e) {
            var target = e.target || e.srcElement;
            // do something with target.previousSrc
            target.previousSrc = target.src;
            // target.previousSrc.push(target.src);
            return;
        };
    for (n = 0; n < images.length; n++) {
        if (images[n].addEventListener) {
            images[n].addEventListener('load', imgOnload, false);
        } else {
            images[n].attachEvent('onload', imgOnload);
        }
        images[n].previousSrc = images[n].src;
        // images[n].previousSrc = [];
        // images[n].previousSrc.push(images[n].src);
    }
    return;
}

document.images这里包含文档中的所有图像，但当然您可以创建自己的所需图像集合。

jsFiddle的现场演示（仅使用最新的src）。

Answer 3

首先，如果它在处理程序的定义中，则处理事件会更容易：

function image_load(event) {
    //...
}

然后，您将需要访问刚刚触发事件的元素，可以像这样获得：

function image_load(event) {
    var src=event.target.src;
    //...
}

但是，没有什么是那么简单的......你必须处理跨浏览器的不兼容问题：

function image_load(event) {
    var evt=event||window.event; // data is either in event or window.event
    var img=evt.target||evt.srcElement; // eiter in .target or .srcElement
    var src=img.src; // :)
    //...
}

我假设您想要一个简单的 js 解决方案，因为没有标记 jQuery。在 jQuery 中，在处理事件链时大大减少了不兼容性，但它也降低了性能，这取决于你是否使用它。

希望这可以帮助。