如何获取新加载的图像's width / naturalWidth

How to get a newly loaded image's width / naturalWidth?

本文关键字：width naturalWidth 图像 加载 何获取 获取 新加载      更新时间：2023-09-26

假设如下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。只有在第一次点击时才会得到正确的值。

为什么?

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

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

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

相关文章：