Какую логику посоветуете при работе с изображениями с помощью атрибута loading?
Приветствую.
Внизу страницы есть группа изображений и до них еще нужно докрутить, страница довольно длинная. Разные тесты советуют добавить атрибут loading="lazy", чтобы сразу все не грузить. Но есть одна заковырка, недающая мне со спокойной совестью добавить этот атрибут к изображению. А заключается эта заковырка в том, что если человек открыл страницу сайта, задержался на первых двух-трех экранах и потом у него пропал доступ к сети, то при прокрутке к картинкам, размещенным почти в самом низу страницы, он их не увидит. И это меня печалит.
Посоветуйте действенные практики из опыта по этому вопросу, пожалуйста.
Дополнительно:
Ну вы выберите чего вы хотите: грузить картинки всегда, чтобы страница после загрузки не зависела от сети, или грузить их только при необходимости. Это так-то взаимоисключающие вещи.
Можно написать костыль, который после DOMContentLoaded будет проходить по картинкам и убирать этот атрибут - тогда "разные тесты" не будут возбуждаться, но для реальных людей польза от lazy пропадёт.
Посмотрите тут, общий совет использовать заполнители https://imagekit.io/blog/lazy-loading-images-compl...
Это как на сигаретном ларьке увидеть табличку "буду через пять минут" или просто закрытую дверь
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
При работе с изображениями с помощью атрибута loading, важно следовать определенной логике, чтобы обеспечить оптимальную производительность вашего сайта.
1. Определите, какие изображения требуют загрузки немедленно (eager) и какие могут быть загружены позже (lazy). Используйте значение "eager" для изображений, которые отображаются в зоне видимости пользователя сразу же при загрузке страницы, чтобы улучшить пользовательский опыт. Для изображений, находящихся за пределами видимости, используйте значение "lazy", чтобы отложить их загрузку и ускорить время загрузки страницы.
2. При работе с изображениями в слайдерах или галереях, убедитесь, что атрибут loading корректно настроен для каждого изображения. Используйте значение "eager" для изображений, которые будут отображаться в слайдере или галерее сразу же, и значение "lazy" для изображений, которые будут загружены только при необходимости.
3. При использовании изображений фона (background images), учитывайте, что атрибут loading не применяется к этому типу изображений. Вместо этого, оптимизируйте размер и формат изображений, чтобы уменьшить время загрузки страницы.
Приведу пример использования атрибута loading с изображением в формате PHP:
<img src="image.jpg" loading="eager" alt="Изображение">
Следуя этой логике при работе с изображениями с помощью атрибута loading, вы сможете оптимизировать время загрузки страницы и улучшить пользовательский опыт.