Как определить, когда все изображения будут загружены и элементы отображаются в их соответствующих высотах

Question

Как я могу проверить (с JQuery или ванили Js), которые загружаются все изображения на странице, и что они были предоставлены в их окончательный, полный рост и что их родительские элементы настроены на эту высоту?

Я реализует scrollspy функцию с помощью JQuery - то, что определяет, когда пользователь находится на странице, и подчеркивает свою позицию в нав, обновляя свою позицию, как они прокрутки. Чтобы это работало правильно, мне нужно знать offset.top каждого раздела на странице, на которой я хочу следить. Если я вычисляю offset.top слишком рано, прежде чем все изображения будут загружены и будут отображаться на их полной высоте, вычисление offset(). Top будет неверным. Я хочу, чтобы избежать смещения(). Верхний расчет слишком много раз.

Вещи я пытался что не отвечают моим требованиям:

$(document).ready() and $(window).onload() оба слишком рано, так как изображения не могут быть оказаны на полную высоту, поэтому делая секции не отображается на полную высоту.

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

Answer 1

Основываясь на моем опыте, я думаю, что это не тривиально. window.onload может помочь, но это ненадежно, когда изображения загружаются динамически. Раньше я использовал какой-то хак, чтобы сделать его работоспособным. В основном, я использовал window.setInterval и проверял, действительно ли изображение доступно, просмотрев имущество naturalWidth (см .: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement).

Вот пример реализации: https://jsfiddle.net/yu8zr20h/

Answer 2

Вы решаете эту проблему в неверном пути. Вам нужно сравнить текущее значение Y окна пользователя с Y-значением всех компонентов или, по крайней мере, контейнеров, содержащих разные значения nav.

Представьте себе это ваш HTML-код:

<div id="firstContainer"> 
    <!-- Some content --> 
</div> 

<div id="secondContainer"> 
    <!-- Some other content --> 
</div> 

Теперь вы можете проверить высоту относительно полной HTML-страницы с помощью document.gelElementBtId('element-id').offsetTop

и текущую высоту пользователя, используя scrollY

Дополнительную информацию можно получить по телефону JSFiddle.