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

如果在图像加载完成之前测量<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);
    }
});

Answer 2

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

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

jQuery height（）函数返回不准确的值

2 个答案: