Javascript appendChild onload 事件

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

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)它返回源文件尺寸，因为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 and DOMNodeInserted事件但是它不起作用。

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

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

然而，它似乎在appendChild被触发后立即运行。

这是小提琴，这样你就可以明白我在说什么：http://jsfiddle.net/0zyybmf2/

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

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

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

换句话说，重绘（和布局更新）在函数返回后且在setTimeout fires.

顺便说一句，建议只设置.src财产after您已附加负载处理程序；在我意识到缓存的图像可能会在更改后立即触发加载处理程序之前，我必须调试我的代码几次.src.

Demo