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

问题可能是您在src事件之前设置了load属性。在许多浏览器中，这将阻止事件处理程序触发。

Answer 3

看起来你抓住div的高度与图像的id相对于抓住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);
    }

FIDDLE

较高版本的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

（这是对这个问题的评论，但不是答案）

Javascript：获取图片大小

9 个答案: