Страница 1 из 1
Ленивая загрузка изображений
Добавлено: 21.08.2020, 15:53
Family Mall
Доброго времени суток!
Обратил внимание что в версии 3..... подключён lazyload.min.js. Хотел бы узнать как применить его, если я на странице хочу загрузить 1000+ изображений. Необходимо просто прописать class="lazyload" изображения или... Если кто может поделиться опытом, буду очень рад. Спасибо.
Добавлено: 22.08.2020, 21:10
makki
Вот строка из шаблона, где задействована ленивая загрузка изображения
Код: Выделить всё
<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
Добавлено: 23.08.2020, 12:40
Family Mall
Спасибо за помощь.
Сделал по той схеме которую Вы написали, после сохранения получился такой код:
Код: Выделить всё
<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">Я так понимаю это уже рабочий вариант кода, все правильно получилось?
Добавлено: 23.08.2020, 16:30
makki
Да класс lazy сработал и подгрузил изображение с data-src. Но в теге src у вас стоит тоже изображение. В таком случае lazy load теряет смысл. PageSpeed от этого у вас не увеличится
Добавлено: 23.08.2020, 20:58
Family Mall
Подскажите тогда есть смысл пользоваться такой структурой?:
Код: Выделить всё
<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. В обоих случаях придется делать две папки с изображениями: необходимые размеры и сжатые.
Добавлено: 23.08.2020, 21:11
makki
Код: Выделить всё
<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" />
Добавлено: 23.08.2020, 21:31
Family Mall
Не совсем понял, что нужно сделать?)
