JQuery height () function returns inaccurate value

Question

I use jQuery to measure the height of two divs (after loading the document), and then for a shorter div equal to the height of a higher div. However, one of the divs has an image in it, and it seems to measure the height of the div as if the image weren’t (if I delete the image after everything has loaded, the height will be accurate). Here is my code:

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

Answer 1

If you know the height of the image in advance, you can set the height attribute of the image tag. This will allow the browser to display the div at the correct height before loading the image, which means your height checks should work as expected.

jQuery , . -, " , ".

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);
    }
});