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)之后立即获取图像尺寸它返回源文件尺寸，因为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被解雇后立即运行。

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

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

Answer 1

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

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

换句话说，重绘（和布局更新）在函数返回后和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 = "http://globe-views.com/dcim/dreams/image/image-03.jpg";

div {
    width: 200px;
}

img {
    display: block;
    width: 100%;
    height: 100%;
}

<div></div>

Javascript appendChild onload事件

2 个答案: