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

Question

假设这个网站：

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