Javascript appendChild onload事件 [英] Javascript appendChild onload event

问题描述

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

I'm appending the dynamically created image element to document.

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

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

这里的问题是如果我在<$ c之后拍摄图像尺寸$ c> container.appendChild（img）返回源文件的尺寸，因为appendChild尚未完成（未重新绘制？）并且尺寸未重新计算。

The problem here is the fact if I take image dimensions right after container.appendChild(img) it returns the source file dimensions because the appendChild has not finished yet(not repainted?) and dimensions are not re-calculated.

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

So ，我想知道是否有可能捕获appendChild的加载事件？

So, I'm wondering if it is possible to catch the load event for appendChild?

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

I know it is possible using setTimeout/setInterval, but I guess there should be more elegant solution.

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

setTimeout / setInterval的问题是我不知道什么时候元素最终被添加并重新绘制。我必须循环运行它。

The problem with setTimeout/setInterval is the fact I don't know when element is finally appended and repainted. I have to run it on a loop.

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

I was trying to listen to DOMNodeInsertedIntoDocument and DOMNodeInserted events however it does not work.

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

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

但是，似乎在appendChild被解雇后立即运行

However, it seems to run right after appendChild is fired.

这里是小提琴，您可以看到我在说什么：
http://jsfiddle.net/0zyybmf2/

Here is the fiddle so you can see what I'm talking about: http://jsfiddle.net/0zyybmf2/

注意：请不要建议检查父级的宽度容器。我需要拍摄图像的宽度。
对此提供的任何帮助将不胜感激。

Note: please don't advise to check the width of the parent container. I need to take a width of the image. Any help with this would be appreciated greatly.

推荐答案

不幸的是，看来您必须交还控件。到浏览器（像您一样使用 setTimeout（））之前，可以观察到最终尺寸；幸运的是，超时时间可能非常短。

Unfortunately, it seems that you have to hand the controls back to the browser (using setTimeout() as you did) before the final dimensions can be observed; luckily, the timeout can be very short.

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

换句话说，一旦函数返回，则重新绘制（和布局更新）

In other words, the repaint (and layout update) is done as soon as your function returns and before the setTimeout fires.

Btw，建议仅设置 .src

Btw, it's advisable to only set the .src property after you've attached the load handler; I've had to debug my code a few times before I realised that cached images may trigger the load handler immediately upon changing .src.

演示

这篇关于Javascript appendChild onload事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！