Какой плагин для Lazyload вы используете?

Question

[Марти Макфлай]

Появилось потребность использовать lazyload. Подскажите, какие плагины вы используете, вот что я нашёл:

• jquery.lazyload
  
• Vanilla LazyLoad
  
• jQuery Lazy Load XT
  
• Hqy-lazyload
  

Не могу понять какой лучше. Цель довольно тривиальна - длинный лендинг, много картинок, сразу грузить их все не рационально.
Плюс попутно ещё вопрос - я так понимаю, что адрес картинок будет в каком-нибудь атрибуте типа data-src, а в обычном src нужно будет заглушку ставить? Картинки из индекса повылетают конечно?

Answer 1

[Марти Макфлай]

Спустя два года сам отвечу на свой вопрос – не нужны никакие плагины.
На мой взгляд, лучшее решение – это использовать атрибут loading="lazy" на тегах img.
Мало того, что это внедряется мгновенно и не требует доп библиотек, так ещё мы не просто тупо подгружаем изображения по ходу скролла, а перекладываем это на плечи браузера, который сам решает, в какой момент ему было бы оптимальнее его загрузить.

Браузерная поддержка неплохая - https://caniuse.com/#feat=loading-lazy-attr

Comments

[Ivan1331]

хороший вариант, но 70% поддержки - это всё же не достаточно, + сафари не поддерживает что весьма весомо. А вот комбинация из loading="lazy" и плагинов для подстраховки уже даёт 100% результат. https://webformyself.com/luchshij-sposob-otlozhenn... - описано как использовать

[Марти Макфлай]

Ivan1331, вы конечно правы, но я использую lazy-load скорее как прогрессивное улучшение.

Если же он нужен позарез - предложенное вами решение выглядит самым адекватным.

В сафари он кстати поддерживается, если включить экспериментальные фичи, так что в обозримое время должны включить по-умолчанию.

[demimurych]

Забудьте про loading lazy.
Это пример работы сделанной на от-бись со стороны гугла.
ссылка на видео, где разобрано по косточкам его работа, а точнее ее отсутствие.

[Марти Макфлай]

demimurych, смотрел через вкладку network – всё работает, картинки/фреймы грузятся только при скролле до них

[demimurych]

Марти Макфлай,
Посмотрите внимательно еще раз видео.
То что ресурсы загружаются - никто не оспаривает. Оспаривается время их загрузки, которое бессмысленно.

Суть любого LazyLoadа в загрузке того что терубется в момент когда это требуется.

То же что сделали с атрибутом loading lazy с точки зрения граничных характеристик - то есть того времени КОГДА он срабатывает делает его бесполезным чуть более чем полностью. По причине того, что что активация процесса загрузки происходит настолько рано, что сводит процесс динивой загрузки к нулю. Он уже не ленивый.

И это я напомню, после того кка удалось уговорить снизить лимиты в два раза.
пол года назад у большинства сайтов вообще не было шансов увидеть ленивую загрузку, потому что грузилось сразу все. Если быть точнее 14 кжранов прокуртки в разрешении 320 x 568 загружались сразу.
И не потому что это была ошибка, а потому что программисты решили что именно такая область должна грузиться сразу. А уж что идет ниже вот то и должно грузиться отложенно.
Еще раз повторяю цифру - 14 экранов.

Answer 2

[Вадим Кот]

https://github.com/aFarkas/lazysizes

В плане seo гугл бот точно видит картинки - можно убедиться в search console в сканирование->Просмотреть как Googlebot. Яндекс нужно протестировать аналогично гуглу в вебмастере.

В статье гугла по ссылке Александр Талалаев есть раздел Lazy loading libraries

Answer 3

[Александр Талалаев]

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

Answer 4

[akavato]

Lozad

Comments

[Вадим Кот]

Марти Макфлай, в браузере в dev tools смотрите во вкладке network какие изображения браузер подгружает, возможно пути неправильно прописаны.

[Illia T]

Решение основано на IntersectionObserver API - НЕ кроссбраузерное решение, к огромному моему сожалению.

[akavato]

illiatovpeko, мб полифилл? https://github.com/w3c/IntersectionObserver/tree/m...
Да и то, это может понадобится только для IE11-
Не думаю, что кому-то интересна опера мини и прочие китайские хламо-браузеры.

[Illia T]

akavato, с заказчиком не поспоришь.