Lazy load 1.4.3: руководство владельца магазина

Плагин Lazy load откладывает загрузку изображений и iframe на витрине магазина, пока они не окажутся в области видимости покупателя. Страница открывается быстрее, браузер не скачивает картинки, до которых покупатель не дошёл. Это руководство для владельца интернет-магазина на Webasyst Shop-Script: программировать не нужно, всё настраивается в административной части.

Версия: Lazy load 1.4.3. Руководство написано по коду и интерфейсу этой версии; сверяйтесь со страницей плагина в магазине Webasyst и историей обновлений.

Что делает плагин

  • Подменяет в HTML витрины теги img и iframe так, чтобы файл загружался только при подходе к экрану.
  • Оставляет у картинок атрибут src: поисковый робот видит картинки даже без JavaScript.
  • Не трогает первые картинки страницы (по умолчанию пять), чтобы верхний экран не замедлялся.
  • Умеет предзагрузку по вертикали и горизонтали, плавное появление, автоматические width и height.
  • Поддерживает фоновые изображения из CSS, видео YouTube с «обложкой» и размытые заглушки LQIP.
  • Позволяет исключить страницы, картинки по классу или атрибуту и целые блоки.

Схема работы: страница открывается, покупатель прокручивает, картинка появляется

Чего плагин не делает

  • Не работает в административной части: только на витрине приложения «Магазин».
  • Не работает в Internet Explorer и браузерах без Intersection Observer API: там картинки грузятся как обычно.
  • Не сжимает и не уменьшает сами файлы. Для этого есть плагин «Изображения PRO».

Как читать руководство

Глава Когда нужна
Быстрый старт Включить плагин и проверить результат за 5 минут
Настройки Предзагрузка, пропуск картинок, эффект, размеры, совместимость
Исключения Отключить плагин на странице, для картинки или блока
Разметка для особых случаев Фоновые изображения, YouTube, LQIP, переключение класса
Совместимость Другой lazyload, «Изображения PRO», PageSpeed Insights
Если что-то не так Типичные проблемы и их решения

Что понадобится

  • Магазин на Webasyst Shop-Script.
  • Доступ к разделу «Магазин → Плагины» в административной части.
  • Тема оформления, которая выводит стандартные хуки витрины ({$wa->header()} и {$wa->footer()}) и подключает jQuery: плагин использует jQuery темы.
Просмотр изображения
Оригинал