Какую логику посоветуете при работе с изображениями с помощью атрибута loading?

Question

[weranda]

Приветствую.
Внизу страницы есть группа изображений и до них еще нужно докрутить, страница довольно длинная. Разные тесты советуют добавить атрибут loading="lazy", чтобы сразу все не грузить. Но есть одна заковырка, недающая мне со спокойной совестью добавить этот атрибут к изображению. А заключается эта заковырка в том, что если человек открыл страницу сайта, задержался на первых двух-трех экранах и потом у него пропал доступ к сети, то при прокрутке к картинкам, размещенным почти в самом низу страницы, он их не увидит. И это меня печалит.
Посоветуйте действенные практики из опыта по этому вопросу, пожалуйста.

Answer 1

[Алексей Уколов]

Ну вы выберите чего вы хотите: грузить картинки всегда, чтобы страница после загрузки не зависела от сети, или грузить их только при необходимости. Это так-то взаимоисключающие вещи.

Можно написать костыль, который после DOMContentLoaded будет проходить по картинкам и убирать этот атрибут - тогда "разные тесты" не будут возбуждаться, но для реальных людей польза от lazy пропадёт.

Answer 2

[Владимир Коротенко]

Посмотрите тут, общий совет использовать заполнители https://imagekit.io/blog/lazy-loading-images-compl...

Это как на сигаретном ларьке увидеть табличку "буду через пять минут" или просто закрытую дверь