Lazyload для html полей

646
Компонент организует "ленивую" загрузку изображений в html полях, обрабатываемых типографом.

Lazy loading – это метод оптимизации скорости загрузки медиафайлов, некритичных для отображения страницы или взаимодействия с пользователями. При «отложенной загрузке» изображения не будут загружаться, пока не понадобятся посетителю.

В текущей реализации, на мой взгляд, самая корректная "ленивая" загрузка. Во-первых, факт попадания изображения в поле зрения пользователя отслеживается с помощью API IntersectionObserver, которое встроено в браузер. Во-вторых, не меняется атрибут src, а используется тот факт, что
в случае если указан атрибут srcset то браузер показывает то, что в этом атрибуте, вне зависимости от того, что находится в атрибуте src.
Т.е. поисковик увидит в атрибуте src именно картинку, а не пиксельную заглушку, как в других реализациях.
И в третьих, добавлена проверка на поддержку API IntersectionObserver в браузере, и если ее нет, то компонент просто покажет все картинки пользователю как есть.

Скачать можно у меня в профиле https://instantcms.ru/users/zau4man в файлах
Там же можно поблагодарить плюсиком в карму.

Установить по инструкции https://docs.instantcms.ru/manual/addons

Скрытый текст виден только зарегистрированным пользователям


Поставляется как есть.
Пожелания, баги можно писать тут.
Дополнительная вложенность в "хлебных крошках"
Комментарии (18)
Def 3 августа 2019 в 09:42 0
а для виджетов, содержащих изображения такое же возможно?) идея отличная!
Zau4man 3 августа 2019 в 11:21 0
Все можно.
Сперва и хотел делать компонент с опциями.
Но не могу нафантазировать.

Ну и в коде виджета/компонента должен быть хук, чтобы можно было внести правки в вывод изображений на просмотр.
Def 3 августа 2019 в 11:49 0
может перехватывать как то сразу, если определилось изображение в виджете?
Def 8 августа 2019 в 22:58 0
эх, жаль не пошла идея дальше поля(
Zau4man 13 августа 2019 в 20:35 0
Killer's dream 13 августа 2019 в 23:06 0
С этим компонентом вкладка "Контент" в админке виснет, и не грузит список.
@Honko 14 августа 2019 в 00:03 0
подтверждаю эту проблему.
maxisoft 14 августа 2019 в 13:24 0
Да есть такая ошибка в ближайшее время ее исправлю.
maxisoft 14 августа 2019 в 13:23 0
ага есть и такое :)
Def 15 августа 2019 в 00:44 0
починилось?)
maxisoft 15 августа 2019 в 11:59 +1
Да обновление доступно в каталоге.
@kami Вчера в 21:22 0
нет не починилось, не грузит, только заметил прочитав
@kami Вчера в 21:24 0
а не все норм сам ступил, в фильтре слова были набраны
@kami Вчера в 21:19 0
Вот что заметил! При включении данного компонента исчезают кнопки редактора при добавлении постов, событий, страниц и т.п. У кого также? И Хотелось бы спросить у разрабов компонента у zau4man и maxisoft

НО КОМПОНЕНТ УСТАНОВЛЕН ИМЕННО ОТ maxisoft
@kami Вчера в 21:25 0
не отображается именно Встроенный редактор, маркетип норм грузится и сторонний iredactor
maxisoft Сегодня в 08:08 +1
скоро будет патч для исправления данной проблемы.
Def Сегодня в 14:14 0
Заметил, что ещё картинки нет в архиве. А в файле есть ссылка на картинку заглушку

Me-dent . Ru ещё какой то интересный скрипт использует)
Def Сегодня в 14:15 0
Заметил, что ещё картинки нет в архиве. А в файле есть ссылка на картинку заглушку

Me-dent . Ru ещё какой то интересный скрипт использует)