Javascript：獲取圖片大小

Question

我無法獲得正確的圖像尺寸

這是HTML：

<img id="image" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif"
    height="20">


<div id="result"></div>
correct result: 76 

和javascript：

var v1 = $('#image').height();
var v2 = $('#image').removeAttr('height').height();
var i =  $('<img>').attr('src',  $('#image').attr('src'));
var v3 = i.height()

i.one('load', function() {
    var v4 = $(this).height();
    $('#result').text(v1 + " " + v2 + " " + v3 + " " + v4);
}).each(function() {
    if(this.complete) {
        $(this).load();
    }
});

我使用了4種方法，但所有方法均失敗。
更新：方法2可行，但是我想使用方法4，因為在腳本執行時可能未加載圖像。

測試鏈接： http : //jsfiddle.net/cMZK7/7/

Answer 1

您引用的是圖像所在的DIV，而不是圖像本身。

Answer 2

問題可能是您在load事件之前設置了src屬性。 在許多瀏覽器上，這將阻止事件處理程序觸發。

Answer 3

看來您是在抓取具有圖片ID的div的高度，而不是在該div中抓取圖像的高度。 嘗試這個：

var v1 = $('#image img').height();

Answer 4

您必須刪除height屬性，然后等待圖像加載完成（使用load事件）。

或者，創建一個新的圖像對象，將相同的圖像加載到其中，然后等待圖像加載完畢。

Answer 5

前兩個是獲取周圍div的高度，而不是img的高度。

console.log($('img').height(), $('img').width())給我20px和88px，它們是圖像的正確尺寸

Answer 6

不確定我是否知道它，但是如果要在height屬性中找到該值，這將起作用：

var height = $("#image img").prop('height');

為了獲得圖像的實際高度，並按實際高度，我的意思是圖像的實際高度，而不是您在CSS等中設置的高度，類似這樣的方法應該起作用：

var img = new Image();
    img.src = ​$('img', '#image')[0]​.src;
    img.onload = function() {
        $("#result").html(img.height);
    }

小提琴

緩存圖像時，較舊版本的IE的onload事件會出現問題。

Answer 7

嘗試這個，

<img id="image" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" />

<script>
$("#image").load(function() {

    alert($("#image").height()); // Alerts 76
    });  

</script>    
​

在這里提琴http://jsfiddle.net/FgrQW/1/

Answer 8

嘗試

$('<img>').get()[0].height;

Answer 9

完整正確的答案： https : //stackoverflow.com/a/1944298/966972

（它在此問題的評論中，但未在答案中）