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

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

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

然后，你将需要访问刚刚解雇事件的元素，这是有可能获得这样的：

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

，但没有什么是简单..你必须处理跨浏览器incompatibilies：

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

我想这是不可能的触发对应src一定onload处理程序，但你可以存储（全部）以前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; 
} 

document.images这里包含了所有的图像文件中，但ofcourse你可以创建自己需要的图片集合。

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