javascript - 如何获取新加载的图像的宽度/自然宽度？

Question

假设这个 html:

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

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

缩略图位于它们自己的名为 thumbnail 的目录中，而它们引用的常规尺寸图像可以在 regular 中找到。缩略图附加了一个事件监听器，它在点击时表现得像这样(e 作为参数传递的事件):

var src = $(e.target).attr("src");
var path = "regular/" + src.slice(src.lastIndexOf("/") + 1);

所以在这种情况下，我放入变量 path 的是 regular/img.png。接下来，我希望 frame 将 path 中的图像作为背景并调整其大小以适应它，但是发生了一些奇怪的事情:

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

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

我希望控制台显示image 的宽度，但我得到的是0。 虽然只有在第一次点击时:任何进一步的点击都会产生正确的值。

这是为什么？

Answer 1

只是因为图片还没有加载。在设置“src”属性之前(而不是之后，因为一旦设置“src”，它就会开始加载文件)，你需要像这样注册一个事件监听器，然后在回调中做你的事情功能:

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

注意:这是纯 javascript，因此不依赖任何外部库；如果愿意，您也可以使用 jQuery load 函数或类似的函数来达到相同的效果。