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

Правила раздела: faq.php?mode=okay
Модератор: Модераторы

Family Mall
Family Mall
Репутация: 2
Сообщения: 27
Зарегистрирован: 04.08.2017
С нами: 3 года 2 месяца

Сообщение #1 Family Mall » 21.08.2020, 15:53

Доброго времени суток!
Обратил внимание что в версии 3..... подключён lazyload.min.js. Хотел бы узнать как применить его, если я на странице хочу загрузить 1000+ изображений. Необходимо просто прописать class="lazyload" изображения или... Если кто может поделиться опытом, буду очень рад. Спасибо.

makki
makki
Репутация: 186
Сообщения: 568
Зарегистрирован: 12.08.2016
С нами: 4 года 2 месяца
Откуда: Киев
Сайт Skype

Сообщение #2 makki » 22.08.2020, 21:10

Вот строка из шаблона, где задействована ленивая загрузка изображения

Код: Выделить всё

<img class="lazy" data-src="{$author->image|resize:320:500:false:$config->resized_authors_dir}" src="{$rootUrl}/design/{get_theme}/images/xloading.gif" alt="{$author->name}" />

1) Добавляем класс lazy
2) Добавляем атрибут data-src со ссылкой на реальное изображение
3) Атрибут scr содержит плейсхолдер, который загружается с сервера перед реальным изображением. В данном примере разработчики используют gif спиннер как плейсхолдер. Плейсхолдер-изображение должно быть максимально легким. Я бы порекомендовал svg формат

Можно обойтись и одним data-src, но тогда сайт не будет соответствовать требованиям W3C
Cоздание и расширение функционала интернет-магазина на платформе OkayCMS 2

Family Mall
Family Mall
Репутация: 2
Сообщения: 27
Зарегистрирован: 04.08.2017
С нами: 3 года 2 месяца

Сообщение #3 Family Mall » 23.08.2020, 12:40

Спасибо за помощь.
Сделал по той схеме которую Вы написали, после сохранения получился такой код:

Код: Выделить всё

<img class="lazy" title="VERMONT-024" src="../files/uploads/tkan/richman/vermont/VERMONT-024.jpg" alt="VERMONT-024" width="150" height="150" data-src="../files/uploads/tkan/richman/vermont/VERMONT-024.jpg" />


Если посмотреть через инспектор кода на странице, получилось :

Код: Выделить всё

<img class="lazy loaded" title="VERMONT-024" src="files/uploads/tkan/richman/vermont/150x150xVERMONT-024.jpg.pagespeed.ic.0esc3e9Aij.jpg" alt="VERMONT-024" width="150" height="150" data-src="files/uploads/tkan/richman/vermont/150x150xVERMONT-024.jpg.pagespeed.ic.0esc3e9Aij.jpg" data-pagespeed-url-hash="1725015149" onload="pagespeed.CriticalImages.checkImageForCriticality(this);" data-was-processed="true">


Я так понимаю это уже рабочий вариант кода, все правильно получилось?

makki
makki
Репутация: 186
Сообщения: 568
Зарегистрирован: 12.08.2016
С нами: 4 года 2 месяца
Откуда: Киев
Сайт Skype

Сообщение #4 makki » 23.08.2020, 16:30

Да класс lazy сработал и подгрузил изображение с data-src. Но в теге src у вас стоит тоже изображение. В таком случае lazy load теряет смысл. PageSpeed от этого у вас не увеличится
Cоздание и расширение функционала интернет-магазина на платформе OkayCMS 2

Family Mall
Family Mall
Репутация: 2
Сообщения: 27
Зарегистрирован: 04.08.2017
С нами: 3 года 2 месяца

Сообщение #5 Family Mall » 23.08.2020, 20:58

Подскажите тогда есть смысл пользоваться такой структурой?:

Код: Выделить всё

<a title="VERMONT-024" href="../files/uploads/tkan/Lefort/vermont/VERMONT-024.jpg" data-fancybox="gallery-vermont-k1" data-caption="VERMONT-024"> <img class="lazy loaded" title="VERMONT-024" src="../files/uploads/tkan/Lefort/vermont/VERMONT-024.jpg" alt="VERMONT-024" width="150" height="150" data-src="../files/uploads/tkan/Lefort/vermont-min/VERMONT-024.jpg" data-was-processed="true"><br><span style="font-size: 14px;">VERMONT-024</span></a>


Или проще сделать:

Код: Выделить всё

<a title="VERMONT-024" href="../files/uploads/tkan/Lefort/vermont/VERMONT-024.jpg" data-fancybox="gallery-vermont-k1" data-caption="VERMONT-024"> <img title="VERMONT-024" src="../files/uploads/tkan/Lefort/vermont-min/VERMONT-024.jpg" alt="VERMONT-024" width="150" height="150"><br><span style="font-size: 14px;">VERMONT-024</span></a>


Можете подсказать, какой вариант будет правильней и лучше для скорости загрузки страницы?

P.S. В обоих случаях придется делать две папки с изображениями: необходимые размеры и сжатые.

makki
makki
Репутация: 186
Сообщения: 568
Зарегистрирован: 12.08.2016
С нами: 4 года 2 месяца
Откуда: Киев
Сайт Skype

Сообщение #6 makki » 23.08.2020, 21:11

Код: Выделить всё

<img class="lazy" title="VERMONT-024" src="../files/uploads/tkan/richman/vermont/placeholder_150x150.svg" alt="VERMONT-024" width="150" height="150" data-src="../files/uploads/tkan/richman/vermont/VERMONT-024.jpg" />


placeholder_150x150.svg.zip
(836 байт) 13 скачиваний
Cоздание и расширение функционала интернет-магазина на платформе OkayCMS 2

Family Mall
Family Mall
Репутация: 2
Сообщения: 27
Зарегистрирован: 04.08.2017
С нами: 3 года 2 месяца

Сообщение #7 Family Mall » 23.08.2020, 21:31

Не совсем понял, что нужно сделать?)


Вернуться в «Вопросы по работе с OkayCMS»

Кто сейчас на форуме (по активности за 5 минут)

Сейчас этот раздел просматривают: 2 гостя