Блог

Я использую jQuery для измерения высоты двух разделов (после загрузки документа), а затем делаю более короткий 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);
}
 

Если вы измеряете <div> высоту до завершения загрузки изображения, его высота не будет учитываться. Вы можете подождать, пока изображение будет готово, используя обработчик события загрузки:

РЕДАКТИРОВАТЬ: обработчик load события может быть зарегистрирован на самом window объекте, чтобы избежать ошибок надежности, на которые указал Крис:

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

Если вы заранее знаете высоту изображения, вы можете установить атрибут высоты тега изображения. Это позволит браузеру отображать div на правильной высоте до загрузки изображения, что означает, что ваши проверки высоты должны работать должным образом.

Согласно документации, перехват события загрузки с помощью jQuery может быть проблематичным. По-видимому, событие «может перестать срабатывать для изображений, которые уже находятся в кэше браузера».