jquery - 在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 演示

$("<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()

jsFiddle 演示

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