Javascript 如何获取新加载的图像&x27；s宽度/自然宽度？

假设这个html：

<img src="thumbnail/img.png">

<div class="frame">
</div>

因此，在本例中，我在变量

path

中输入的是

regular/img.png

。接下来，我希望

frame

将

路径上的图像作为背景，并调整其大小，但发生了一些奇怪的事情：

var image = new Image();
image.src = path;

console.log(image.width); // weirdness starts here
                          // same behavior with .naturalWidth

我希望控制台显示
图像的宽度，但我得到的是
0
仅在第一次单击时执行。：任何进一步的单击都会生成正确的值

这是为什么？
这只是因为图像尚未加载。在设置“src”属性之前（而不是之后，因为一旦设置了“src”，它就会开始加载文件），您需要像这样注册一个事件侦听器，然后在回调函数中执行以下操作：

var image = new Image();
image.addEventListener("load", function() {
    console.log(image.width);
}, false);
image.src = path;

注意：这是纯javascript，因此不依赖任何外部库；如果愿意，您也可以使用jQuery
load
函数或类似功能来实现相同的效果。
这是因为调用
width（）
时图像尚未加载。您需要将
load（）
事件处理程序添加到
img
中，并获取其中的宽度。@kaido我没有否决任何内容吗？这与FBlite有什么关系？我只使用jQuery作为第一个示例。我们的任何一个答案都可以解决这个问题。@Rorymcrossan很好的观点，有多种方法做某事总是好的！我接受了这个答案，因为它很好，并指出了Rory的答案，这同样有价值。谢谢！
var image = new Image();
image.addEventListener("load", function() {
    console.log(image.width);
}, false);
image.src = path;