Ленивая загрузка изображений с использованием IntersectionObserver

[gradmax]

Думаю надо отметить, что для того чтобы этот код работал в Safari, необходимо использовать полифилл, к примеру polyfill.io/v2/polyfill.min.js?features=IntersectionObserver

[GCU]

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

[waltter]

В статье же сказано, что

rootMargin

это исправляет.
Но вот у меня вопрос: а что делать, если мы заранее не знаем высоту изображения?

[ivan386]

Почему то все дёргают тег <img src="image.jpg">? Я использую тег <a class="lazy" style="background-image:(image.jpg)" href="big-image.jpg"></a> и <style>.lazy{background-image: none !important}</style>. Если ссылка не нужна то можно использовать span или div.

Это позволяет автоматически отложить загрузку изображения до тех пор пока с тега не будет снят класс "lazy". Заодно появляется больше возможностей играться стилями с изображением. Ну естественно элементу нужно заранее задать размеры и block или inline-block в стилях.

[dumistoklus]

Возможно, дело в индексации изображений? Также для многих важно соблюдать семантику

[ivan386]

Ну видимо за счёт использования ссылок на изображения с индексацией всё в порядке.

[dumistoklus]

.