jquery - 在加载事件中动态获取 IMG 的尺寸

Question

的尺寸11.jpg不是100*100，但我想在加载事件中获得图像的真实尺寸。我怎么能做到？

<img id="t" src="img/11.jpg" width="100px" height="100px" />

$('#t').load(function() {

});

Answer 1

我不一定知道这是最好的方法，或者如果您需要内部img.onload本身，但您可以使用Image对象来获取img没有widthandheight属性的对象。

$('#t').load(function() {
    var img = new Image();
    img.src = this.src;

    img.onload = function(){
        console.log(img.width);
        console.log(img.height);
    };
});

演示（打开你的控制台）：http: //jsfiddle.net/ZgKGG/1/注意，img标签上的属性给了它100x100尺寸，但图像实际上是128x128.

Answer 2

使用 jQuery，

$(document).ready(function() {
    alert("Widht :" + $("#t").width() + "\nHeight :" + $("#t").height());    
});​

使用普通的 javaScript

var imgObj = document.getElementById("t");
 alert("Widht :" + imgObj.width + "\nHeight :" + imgObj.height);  

如果您想使用 jQuery 方式，请删除高度和宽度。你的 html 应该是，

<img id="t" src="http://www.gravatar.com/avatar/8953449b7b29d04cb89adaf912d84980?s=32&d=identicon&r=PG" />

在此处尝试此工作示例