Rose debug info
---------------

OpenCart: как подключить LazyLoad

На страницы товаров, в категориях, результаты поиска, страницы производителей.

Что это

Это ленивая загрузка изображений, которая ускоряет загрузку сайта.

Что делать

Примечание: для работы скрипта нужна подключённая библиотека jquery.

  1. Скачать lazyload.min.js.
  1. Можно подключить и ссылкой:
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@15.1.1/dist/lazyload.min.js"></script>
  1. Загрузить файл в catalog/view/javascript/. Или куда удобно.
  1. Подключить в header.twig в своей теме.
  1. В footer.twig, перед закрывающим тегом body, вставить:
<script>
var lazyLoadInstance = new LazyLoad({
    elements_selector: ".lazy"
});
</script>
  1. Переходим в сайт/catalog/view/тема/product/category.twig
  1. К каждому тегу img добавляем класс lazy, а вместо src — data-src. Вот так:
<img class="lazy" data-src="ссылка на изображение" alt="">
  1. Тоже самое нужно проделать в файлах product.twig, search.twig, manufacturer_info.twig.
  1. Сохраняем, обновляем кэш.
  1. Готово.

У скрипта много настроек и возможностей, взгляните на гитхабе.

Поделиться
Отправить
 1087   2020   OpenCart 3   работа