捕获图像的加载事件，动态更改其源

我正在动态更改图像的src，并希望捕获该图像的加载事件。 有没有办法可以做到？

Answer 1

几年前，我发现在第二次设置.src时，onload事件在某些浏览器中并不可靠（我不记得是哪些）。 因此，我决定更换图像对象。 我将创建一个新的图像对象，设置onload处理程序，设置.src值，然后加载时，将其插入页面代替现有图像。

在javascript中从头开始创建图像时，您可以这样做：

 var img = new Image(); img.onload = function() { // put your onload code here }; img.src = "xxx.jpg" 

如果您只想更改图像的.src ，只需在页面中找到DOM对象并设置它的.src属性即可。

 var img = document.getElementById("myImage"); img.src = "xxx.jpg"; 

如果你想在重置.src时尝试捕获onload事件（几年前我遇到了可靠性问题，你会这样做：

 var img = document.getElementById("myImage"); img.onload = function() { // your code here }; img.src = "xxx.jpg"; 

如果要加载新图像并在加载时用它替换现有图像，则可以执行以下操作：

 function replaceImg(oldImage, newSrc) { var img = new Image(); img.onload = function() { var parent = oldImage.parentNode; parent.insertBefore(img, oldImage); parent.removeChild(oldImage); // put any other code you want here when the // replacement image is loaded and in place }; img.src = newSrc; } 

而且，你会这样称呼：

  var oldImage = document.getElementById("myImage"); replaceImg(oldImage, "xxx.jpg"); 

Answer 2

 // create image object var image = new Image(); image.onload = function () { // do stuff $('#myimageelementid').prop('src', image.src); // set the element in the DOM with this image } image.src = "image.jpg"; // will trigger onload when loaded