-1

我无法获得正确的图像尺寸

这是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/

4

9 回答 9

2

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

于 2012-07-21T14:56:19.157 回答
1

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

于 2012-07-21T14:56:19.687 回答
1

看起来您使用图像 id 抓取 div 的高度，而不是抓取该 div 内图像的高度。试试这个：

var v1 = $('#image img').height();
于 2012-07-21T14:57:47.937 回答
1

您必须删除该height属性，并等到图像已加载（使用load事件）。

或者，创建一个新的图像对象，将相同的图像加载到其中，然后等待图像加载完毕。

于 2012-07-21T15:00:01.893 回答
1

前两个是周围的高度div，而不是img。

console.log($('img').height(), $('img').width())给我 20px 和 88px，这是图像的正确尺寸

于 2012-07-21T15:00:57.233 回答
1

不知道我明白了，但如果重点是在 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 事件问题。

于 2012-07-21T15:08:42.470 回答
1

试试这个，

<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/

于 2012-07-21T15:10:25.150 回答
0

尝试

$('<img>').get()[0].height;
于 2012-07-21T14:57:59.083 回答
0

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

（它在这个问题的评论中，但不在答案中）

于 2012-08-04T10:54:01.713 回答