我正在动态更改图像的src,并希望捕获该图像的加载事件。我有办法吗?
答案 0 :(得分:3)
几年前,我发现在第二次设置.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;
}
而且,你会这样称呼:
<img id="myImage" src="yyy.jpg">
var oldImage = document.getElementById("myImage");
replaceImg(oldImage, "xxx.jpg");
答案 1 :(得分:0)
// 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