Как лучше сделать Lazy Load для адаптивных изображений?

Question

[TitNIk]

Вечер добрый. Может кто подскажет, как лучше всего сделать адаптивный lazy load для изображений, без явного прописывания ширины и высоты? Может есть хаки какие? Заранее спасибо )

Answer 1

[Alexandr Alexandrov]

• https://github.com/ivopetkov/responsively-lazy
  
• https://afarkas.github.io/lazysizes/
  

Comments

[TitNIk]

Понравился первый вариант, но почему-то не работает, если еще указывать src (в случае, если JS выключен). Вроде в этом его фишка. Может знаете, в чем может быть проблема?

[Alexandr Alexandrov]

TitNIk, всё-таки без js он не заработает. обратите внимание, что картинки указываются неким массивом "srcset", "data-srcset".

https://ivopetkov.com/b/lazy-load-responsive-images/

[TitNIk]

Alexandr Alexandrov, да, я указываю с помощью src и srcset, если указывать только srcset, то работает, если еще указать src, не работает, хотя, вроде как, в описании указано, что в этом его фишка и он должен работать. ))

[TitNIk]

Alexandr Alexandrov, может посоветуете, как сделать lazy load с поддержкой устройств с отключенным JS? То бишь, чтобы если JS выключен, грузилось все без lazy load )

[Alexandr Alexandrov]

TitNIk, можно переделать. Например, как в статье описано https://www.robinosborne.co.uk/2016/05/16/lazy-loa... - на js эффект формируется, а если отключён js на устройстве - скрываются лишние изображения .hidden {display:none;} и через noscript подгружаются нужные. Впрочем, можно отсюдать взять только логику - прятать картинки и показывать при noscript свой блок, свои изображения.

Информация в помощь https://stackoverflow.com/a/38395681/7124221

[TitNIk]

Alexandr Alexandrov, Огромное спасибо ) Да, лучше взять логику и самому реализовать, думаю быстрее выйдет )