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

Question

我使用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);
}

Answer 1

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

根据its documentation的说法，使用jQuery挂接load事件可能会有问题。显然，该事件“可以停止触发已经存在于浏览器缓存中的图像”。

Answer 2

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

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

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