Разное значение функции $.height() в разное время

195

26 ноября 2016, 18:38

Прогуглил - не помогло, прогуглил на английском - тоже не помогло, пришел на добрый старый Stackoverflow. Итак, сразу к делу. Структура верстки такая:

<div class="header">
  <div>
    <h1>Hello world</h1>
  </div>
  <div>
    <img style="height: 100%">
  </div>
</div>

Я пытаюсь получить высоту .header самым обычным

console.log(
  $('.header').height()
);

И вот тут то самое интересное: если я вставляю эту функцию в обычный <script> внутри функции $(document).ready(function () {});, то в консоль выводится значение больше реального. Если введу выше указанный код в консоль браузера после того как страница загрузилась, то выдает действительное.

В результате длительного гугления выяснил, что это особенность вызванная свойством line-height, который, насколько я понял, высчитывается после готовности DOM. И дело в том, что шрифт у меня подключенный, на дефолтной "Гельветике" все работает должным образом. Задача, насколько я понимаю, вызвать эту функцию после просчета line-height. А еще ради подтверждения источника проблемы решил line-height приравнять к 0, и вуаля - тоже все работает. Помогите. Надеюсь доходчиво описал проблему.

Answer 1

Для изображений, чтобы вёрстка не "скакала", следует указывать фиксированные размеры через атрибуты width и height.

Также, если вы используете подключаемые шрифты, то следует дождаться их полной загрузки. Используемый вами $(document).ready(function () {/* ... */}); срабатывает только при полной загрузке DOM, что не гарантирует загрузку ассетов (шрифтов, стилей, изображений, и т.п.) и айфреймов.

Добиться желаемого результата можно двумя способами:

window.addEventListener('load', function () { /* ... */ });

... или ...

window.onload = function () { /* ... */ };

Первый вариант предпочтительнее как минимум потому, что на странице можно будет создать множество событий, срабатывающих при загрузке страницы, в то время как второй вариант может быть использован лишь единожды. Если есть желание детальнее взвесить плюсы и минусы обоих подходов, рекомендую ознакомиться с ответом на этот вопрос: addEventListener vs onclick