在jQuery中获取图像的原始宽度和高度

Question

我需要在给定特定来源的情况下获得图像的原始宽度和高度。我目前的方法是：

img.tag = "<img style='display:none;' src='" + img.src + "' />";
img.Owidth = 0;
img.Oheight = 0;

$(img.tag).load(function() {
    img.Owidth = $(this).width();
    img.Oheight = $(this).height();
}).appendTo(img.parent());

Owidth和Oheight是加载图片的原始尺寸。我想知道是否有更好的方法来做到这一点：

• 图片可能已加载，但显示的尺寸与原始尺寸不同。
• 图片尚未加载

Answer 1

跨浏览器：

<强> jsFiddle demo

$("<img/>").load(function(){
    var width  = this.width,
        height = this.height; 
    alert( 'W='+ width +' H='+ height);
}).attr("src", "image.jpg");

---

HTMLImageElement属性/ HTML5兼容浏览器

如果您想调查所有HTMLImageElement 属性：https://developer.mozilla.org/en/docs/Web/API/HTMLImageElement
其中许多属性已经在现代的 HTML5兼容浏览器中提供，并且可以使用jQuery的.prop() metod

进行访问

<强> jsFiddle demo

var $img = $("#myImage");

console.log(
    $img.prop("naturalWidth") +'\n'+  // Width  (Natural)
    $img.prop("naturalHeight") +'\n'+ // Height (Natural)
    $img.prop("width") +'\n'+         // Width  (Rendered)
    $img.prop("height") +'\n'+        // Height (Rendered)
    $img.prop("x") +'\n'+             // X offset
    $img.prop("y")                    // Y offset ... 
);

Answer 2

对于Chrome和Firefox（很快就会推荐IE），您可以使用...

var width = $('img').prop('naturalWidth');
var height = $('img').prop('naturalHeight');