Как реализовать большие изображения с отложенной загрузкой?

Question

[Senseich]

Всем привет! Никогда ранее не использовал эту технологию, но вопрос срочный, т.к. мне нужно выполнить тестовое задание. Прошу войти в положение и помочь разобраться. Выслали задание, мне интересна следующая часть:

Необходимо написать лендинг на любую тематику. Один текстовый блок, два графических
с большим кол-вом изображений (большие изображения желательно
реализовать с отложенной загрузкой).

Я не понимаю, что значит "большие изображения желательно реализовать с отложенной загрузкой"? Если я не ошибаюсь, то отложенная загрузка применяется для всех изображений которые появляются по мере скрола страницы. Разве можно применять к отдельным изображениям?

Если я ошибаюсь, то как такое реализовать? И в целом, где есть хороший материал по этой теме? Я понимаю, что гугл в помощь, но сейчас просто нет времени серфить по сайтам. Заранее благодарю.

Comments

[Dymok]

имхо, самый простой вариант, если делать вручную - для всех больших изображений в теге img вместо атрибута src использовать data-src, а после загрузки страницы заменить data-src на src.
самый простой вариант, используя готовые плагины - jQuery Lazy

[Otrivin]

Dymok, и потерять индексирование картинок поисковиком.

[Dymok]

Otrivin, а для лендинга оно нужно?

[Otrivin]

Dymok, бесплатный трафик не повредит (если изображение оригинальное)

Answer 1

[Otrivin]

1) на CSS похожий эффект делается с помощью background-image; должен сказать, что фоновые картинки поисковиком, вроде как, не индексируются.
2) на is/jQuery есть куча плагинов, но все они замещают тег IMG, что может плохо сказаться на поисковой оптимизации изображений. Особенно обидно, если они - оригинальные.

Comments

[Senseich]

Otrivin, 1) Можно подробнее про background-image, не совсем понятно как с помощью css можно сделать отложенную загрузку без js?

2) Как понять замещают тэг IMG, а что тогда на страничке отображается?

[Otrivin]

Senseich, 1) обычно фоновые изображения грузятся в последнюю очередь, по мере обращения к ним

qaru.site/questions/51117/are-unused-css-images-do...

https://web-standards.ru/articles/front-end-perfor...

2) точнее, замещается атрибут src тега img. В src прописывается либо base64-картинка (может быть low-res копия, или вовсе однопиксельный гиф), а в атрибуте data-src - урл нормальной картинки. ПС сканируют атрибут src; вроде, они могут парсить и выполнять js, но это не точно (по крайней мере, насчёт индексирующего я не уверен).

Есть плагин responsively lazy, он не замещает оригинальный src, а использует альтернативный атрибут. Посмотри его

[Senseich]

Otrivin, 1) Что то я до конца не понял про фон, т.е. вы хотите сказать, что если в верстке идет вначале элемент с фоном, а потом изображение, то элемент с фоном загрузиться после загрузки изображения? ) Извиняюсь за назойливость, но не пойму, где здесь отложенная загрузка?