Сохранение смещения / положения элемента DOM, когда все ресурсы страницы загружены

Question

У меня есть элемент DOM, в котором я храню позицию смещения. Например:

$element.data('offset', $element.offset().top);

Однако, поскольку страница использует веб-шрифты и содержит изображения, которые не имеют явных атрибутов width или height в HTML, длина страницы фактически увеличивается после завершения загрузки этих элементов.

Следовательно, если этот код выполняется до полной загрузки всех ресурсов, смещение будет другим. Например, 500, если веб-шрифты все еще загружаются, и 1000, если все загружено.

Я пытался использовать функцию jQuery load. Это улучшает ситуацию, сохраняя смещение только после полной загрузки страницы в 70% случаев. Однако мне нужна 100% точность.

Как это можно решить?

Answer 1

Используйте Google WebFont Loader, а именно обратный вызов active().Загрузчик поддерживает библиотеки шрифтов, отличные от Google, поэтому вы можете загружать свои собственные шрифты:

https://developers.google.com/webfonts/docs/webfont_loader

Answer 2

Попробуйте использовать load на window объект, который запускается, когда все ресурсы загружены на страницу, может быть, это поможет вам.

$(window).load(function(){
    $element.data('offset', $element.offset().top);
});