jQuery height() 函数返回不准确的值答案

【问题标题】：jQuery height() function returning inaccurate valuejQuery height() 函数返回不准确的值
【发布时间】：2011-12-13 11:43:57
【问题描述】：

我正在使用 jQuery 测量两个 div 的高度（在文档加载后），然后使较短的 div 等于较高 div 的高度。然而，其中一个 div 中有一个图像，它似乎是在测量 div 的高度，就好像图像不存在一样（如果我在所有内容加载后删除图像，高度是准确的）。这是我的代码：

$(document).ready(function() {
    var rheight = $('#random').height();
    var qheight = $('#quote').height();
    if(rheight > qheight) $('#quote').height(rheight);
    else $('#random').height(qheight);
}

【问题讨论】：

你设置了img的宽高吗？如果 img 标签有 width='' 和 height=''，那么 div 应该会很好。

标签： jquery height

【解决方案1】：

如果您在图像加载完成之前测量<div>，则不会考虑其高度。您可以使用load 事件处理程序等待图像准备就绪：

编辑：load 事件处理程序可以在 window 对象本身上注册，以避免 Chris 指出的可靠性缺陷：

$(window).load(function() {
    var rheight = $("#random").height();
    var qheight = $("#quote").height();
    if (qheight > rheight) {
        $("#quote").height(rheight);
    } else {
        $("#random").height(qheight);
    }
});

【讨论】：

$(window).load() 对我不起作用；显然，由于某种原因，它仍然开得太早了。

【解决方案2】：

如果事先知道图片的高度，可以设置图片标签的height属性。这将允许浏览器在图像加载之前以正确的高度呈现 div，这意味着您的高度检查应该按预期工作。

根据its documentation，使用 jQuery 挂钩加载事件可能会出现问题。显然，该事件“对于已经存在于浏览器缓存中的图像可以停止触发”。

【讨论】：

如此简单的解决方案！非常感谢。