我将动态创建的图像元素附加到文档中。
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 被触发后立即运行。
这是 fiddle ,所以你可以明白我在说什么: http://jsfiddle.net/0zyybmf2/
注意:请不要检查父容器的宽度。我需要拍摄图像的宽度。 对此的任何帮助将不胜感激。
最佳答案
不幸的是,在观察到最终尺寸之前,您似乎必须将控件交还给浏览器(像您一样使用 setTimeout()
);幸运的是,超时时间可以很短。
container.appendChild(img);
setTimeout(function() {
console.log(img.width);
}, 0);
换句话说,重绘(和布局更新)在您的函数返回后和 setTimeout
触发之前立即完成。
顺便说一句,建议仅在 附加负载处理程序之后设置 .src
属性;在我意识到缓存的图像可能会在更改 .src
时立即触发加载处理程序之前,我不得不调试我的代码几次。
关于Javascript appendChild onload 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28669535/