我正在动态更改图像的 src,并希望捕获该图像的加载事件。有什么办法可以做到吗?
最佳答案
几年前,我在第二次设置.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");
关于javascript - 捕获动态更改其来源的图像的加载事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12205707/