Question

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

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

在下面的示例中，它返回undefined。

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”，但此时它并没有得到很好的支持。）

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);

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

http://jsfiddle.net/D7dx6/

2 个答案: