Javascript appendChild onload 事件

Question

我正在将动态创建的图像元素附加到文档中。

var img = new Image();
img.src = 'test.jpg',
img.onload = function() {

    var addedImg = container.appendChild(img);
    console.log(img.width); //old width.
}

这里的问题是，如果我在 container.appendChild(img) 之后立即获取图像尺寸，它 returns 源文件尺寸，因为 appendChild 尚未完成（未重新绘制？）并且尺寸未重新-计算。

var addedImg = container.appendChild(img);
console.log(img.width) //returns original width of the image

所以，我想知道是否可以捕获 appendChild 的加载事件？

我知道可以使用 setTimeout/setInterval，但我想应该有更优雅的解决方案。

var addedImg = container.appendChild(img);
setTimeout(function() {
    console.log(img.width); //return correct resolution after image dimensions were recalculated
}, 1000);

setTimeout/setInterval 的问题是我不知道元素何时最终附加和重新绘制。我必须运行循环。

我试图收听 DOMNodeInsertedIntoDocument 和 DOMNodeInserted 事件，但它不起作用。

img.addEventListener("DOMNodeInserted", onImageInserted, false);
img.addEventListener("DOMNodeInsertedIntoDocument", onImageInserted, false);

function onImageInserted(event) {
    console.log(img.width); //still wrong width
}

但是，似乎运行在 appendChild 被解雇之后。

这里是 fiddle 所以你可以明白我在说什么： http://jsfiddle.net/0zyybmf2/

注意：请不要检查父容器的宽度。我需要拍摄图像的宽度。如有任何帮助，我们将不胜感激。

Answer 1

不幸的是，在观察到最终尺寸之前，您似乎必须将控件交还给浏览器（像您一样使用 setTimeout()）；幸运的是，超时时间可以很短。

container.appendChild(img);
setTimeout(function() {
    console.log(img.width);
}, 0);

换句话说，重绘（和布局更新）会在您的函数 returns 和 setTimeout 触发之前立即完成。

顺便说一句，建议只设置 .src 属性在附加负载处理程序之后；在我意识到缓存图像可能会在更改 .src.

后立即触发加载处理程序之前，我不得不调试我的代码几次。

Demo

Answer 2

var img = new Image();
var container = document.getElementsByTagName("div")[0];
container.appendChild(img);

img.onload = function() {
  alert('Width = ' + img.width);
}

img.src = "https://picsum.photos/id/1015/600/400";

div {
    width: 200px;
}

img {
    display: block;
    width: 100%;
    height: 100%;
}

<div></div>

Answer 3

因为 2022 MutationObserver 可能是一个解决方案。

const callback = ( mutations, mutationObserver ) => {
   mutationObserver.disconnect();
   const MutationRecord = [...mutations];
   console.log( MutationRecord );
};

let mutationObserver = new MutationObserver( callback );

mutationObserver.observe( document.querySelector( "#mmp-map-2b40f571" ), { childList: true, subtree: false } );

document.querySelector( "#mmp-map-2b40f571" ).appendChild( document.createElement( "div" ) );

<div id="mmp-map-2b40f571"></div>

Javascript appendChild onload 事件

Javascript appendChild onload event

javascript

appendchild

addeventlistener