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

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

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中，在处理事件链时，不兼容性会大大降低，但它也会降低性能，取决于您是否使用它。

希望这有帮助。

Answer 3

我想我不可能触发与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）。

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

3 个答案: