javascript - 捕获动态更改其来源的图像的加载事件

Question

我正在动态更改图像的 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 时 try catch 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;
}

而且，您可以这样调用它:

<img id="myImage" src="yyy.jpg">


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