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

我有一个图像，

src

，我正在快速改变它。我在image元素的

load

事件上附加了一个处理程序。有没有一种方法可以在每次加载图像时都不实例化新的图像对象的情况下，获得与正在触发的

load

事件对应的

src

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

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

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;
}

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

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

---

要首先获取当前的

src

，如果事件在处理程序的定义中，则更容易处理该事件：

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

然后，您需要访问刚刚触发事件的元素，可以获得如下结果：

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

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

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;
}

但是，没有什么比这更简单的了。。您必须处理跨浏览器不兼容的问题：

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

---

希望这有帮助。

我想不可能触发与

src

对应的某个

onload

处理程序，但是您可以将（所有）先前的

src

存储到图像中，然后选择要执行的函数。大概是这样的：

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

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

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;
}

window.onload=function（）{
var n，
images=document.images，
imgOnload=函数（e）{
var target=e.target | | e.src元素；
//使用target.previousSrc执行某些操作
target.previousSrc=target.src；
//target.previousSrc.push（target.src）；
返回；
};
对于（n=0；n

document.images

此处包含文档中的所有图像，但您当然可以创建自己需要的图像集合

---

现场演示（仅使用最新的

src

）。

嗨，对不起，我的意思是在加载事件触发时获取图像的src。由于我一直在更改src，“当前”src将远远领先于我试图获得的src。