jquery - load イベントで 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なしでを取得できます。widthheight

$('#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" />

ここでこの実用的な例を試してください