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函数或类似函数来实现相同的效果。

如何获取新加载的图片的宽度/自然宽度？

1 个答案: