javascript - 通过其 src 获取图像的自然宽度

Question

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

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

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

http://jsfiddle.net/D7dx6/

Answer 1

Updated:

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”，但目前还没有得到很好的支持。)