Как лениво загружать изображения при отображении для людей с отключенным JavaScript

Question

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

Ленивая загрузка изображений, как

Ленивая загрузка изображений

Если я включу все изображения на странице с установленными атрибутами src, правильно ли я считаю, что невозможно остановить загрузку изображений в кросс-браузерном режиме?

Если я просто включу атрибуты data-src, пользователи без JS не увидят изображения.

Я думал о каком-то <noscript> решение, но разве это не сделает страницу семантически плохой?

Answer 1

Используйте обычные img теги с src атрибутами в вашей разметке, затем используйте JavaScript, чтобы обнулить атрибуты src изображений, которые вы хотите загружать с отложенной загрузкой, и соответственно обрабатывать отложенную загрузку.Пользователи с отключенным JavaScript будут загружать все изображения в обычном режиме, а пользователи с включенным JavaScript получат более отзывчивый опыт просмотра.

Answer 2

На самом деле, это возможно. Просто используйте атрибут decoding , установленный как асинхронный, вот так.

<img src="/path/to/file.jpg" decoding="async"></img>

Обратите внимание, что не все браузеры поддерживают это (* кашель * Internet Explorer * кашель *), но поддержка растет в популярных хороших браузерах.

Кроме того, я предполагаю, что наиболее вероятная причина, по которой вы хотите загружать изображения, - это ускорение загрузки вашего сайта. Если это так, то вы можете заставить ваш сайт загружаться на огромную сумму еще быстрее, просто конвертируя ваши изображения в jpegs и сжимая их с помощью compressor.io / JPEGmini (загрузите ваш jpeg использовать оба файла и использовать тот, который меньше после сжатия).