javascript - 通过其 src 获取图像的 naturalWidth

Question

如果我有一个带有 url 的图像，例如img/160x180.jpg如何在 jquery/javascript 中单独使用它，我可以获得它的宽度和高度。我试过了

alert($('<img src="img/160x180.jpg"/>').naturalWidth)

在下面的示例中，它返回未定义。

http://jsfiddle.net/D7dx6/

Answer 1

更新：

alert($('<img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif"/>')[0].width);

编辑——这真的没有意义；它需要在事件处理程序中：

$('<img/>', {
  'load': function() { alert(this.width); },
  'src': 'http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif'
});

应该注意的是，该代码在 IE 上可能会出现问题，因为如果设置了“src”并且在“加载”处理程序建立之前在缓存中找到了图像，它有时会掉球。在这种情况下，您可以这样做：

$('<img/>', { 'load': function() { alert(this.width); } }).prop('src', 'http://...');

没有“naturalWidth”属性。

虽然在这种情况下它几乎是无关紧要的开销，但你可以在没有 jQuery 的情况下这样做：

var img = new Image();
img.onload = function() {
  alert(img.width);
};
img.src = "http://placekitten.com/300/400";

现在要注意的一件事是，如果您正在查看实际的页面元素（即<img>页面上的标签），它们可能具有覆盖真实大小的“宽度”属性。再次获取图像通常会将其从缓存中拉出，尽管对于移动设备上的巨大图像存在一些潜在的痛苦。

（编辑——Graham指出有一个“naturalWidth”，但目前还没有得到很好的支持。）

Answer 2

naturalWidth并且naturalHeight尚未得到很好的支持：请参阅https://developer.mozilla.org/en/DOM/HTMLImageElement。

确定图像原始尺寸的纯 JavaScript 方法（无论它当前是否存在于 DOM 中）是使用Image对象。

var img = new Image();
img.src = 'path/to/img.jpg';
// you'll probably want to use setTimeout to wait until the imh.complete is true
console.log(img.width);