Отложенная загрузка изображений
Этот модуль входит в нашу Подписку.
Оформите подписку — и пользуйтесь всеми модулями без ограничений.
Отложенная загрузка изображений ускоряет витрину CS-Cart: магазин не загружает все картинки сразу, а подгружает их по мере прокрутки страницы покупателем. Первый экран становится легче, страница быстрее открывается, а лишний трафик не расходуется на изображения, до которых пользователь ещё не дошёл.
Для чего нужен
Модуль полезен магазинам с большими каталогами, насыщенными карточками товаров, баннерами, блогом и меню с графикой. Он помогает снизить нагрузку на браузер и сеть, улучшить восприятие скорости сайта и аккуратно обслуживать страницы с большим количеством изображений без ручной настройки каждого товара или блока.
Основные возможности
- Откладывает загрузку изображений до момента, когда они появляются рядом с видимой областью страницы.
- Работает с изображениями товаров, миниатюрами, баннерами, блоками блога и графикой в меню.
- Поддерживает изображения, которые используются как фон в баннерах и отдельных элементах темы.
- Позволяет выбрать источник JavaScript-библиотек: внешний CDN или локальные файлы модуля.
- Показывает безопасный плейсхолдер для изображений, которые ещё не получили реальный адрес.
- Учитывает страницы, где отложенная загрузка не должна мешать стандартному поведению, например быстрый просмотр товара.
Как работает
После включения модуль автоматически меняет вывод изображений на витрине. Вместо немедленной загрузки всех картинок он помечает их для lazy load и подключает скрипт, который отслеживает приближение изображения к зоне видимости. Когда покупатель прокручивает страницу, нужная картинка загружается в подходящий момент.
Для фоновых изображений модуль применяет тот же подход: баннеры, меню и другие графические блоки не утяжеляют первый экран, но появляются корректно, когда становятся нужны пользователю. Администратор может оставить подключение библиотек с внешнего источника или переключиться на локальные скрипты из комплекта модуля.
Остались вопросы по работе модуля?
- Store Builder
- Store Builder Ultimate
- Multi-Vendor
- Multi-Vendor Plus
- Multi-Vendor Ultimate
- Владельцам
- English
- Русский
- 4.18.X
- 4.17.X
- 4.16.X
Инструкция к модулю Отложенная загрузка изображений
Что делает модуль
Модуль включает lazy load для изображений на витрине CS-Cart. Он не загружает все картинки страницы сразу, а подставляет специальные атрибуты и подключает JavaScript, который загружает изображение, когда покупатель прокручивает страницу до нужного блока.
Модуль применяется к изображениям товаров, миниатюрам, баннерам, изображениям в меню и некоторым блокам блога/темы. Для каждого товара или баннера отдельная настройка не нужна.
Где находится модуль
Настройки доступны в административной панели: Модули → Управление модулями → Отложенная загрузка изображений.
В настройках есть параметр Использовать внешнюю js библиотеку:
- Включено — модуль подключает библиотеки Intersection Observer и Vanilla LazyLoad с внешнего CDN.
- Выключено — модуль использует локальные JavaScript-файлы из комплекта модуля.
Если на проекте запрещены внешние CDN или магазин должен работать без обращения к сторонним источникам, отключите внешний вариант и используйте локальные скрипты.
Как работает на витрине
- Обычные изображения получают класс
csc-lazyи адрес изображения в lazy-load атрибутах. - Изображения ниже первого экрана загружаются только при приближении к видимой области страницы.
- Для фоновых изображений в баннерах и элементах меню модуль переносит загрузку до момента, когда блок становится нужен покупателю.
- Страницы быстрого просмотра товара и отдельные служебные сценарии не меняются, чтобы lazy load не мешал стандартному поведению CS-Cart.
Как проверить работу
- Откройте на витрине категорию с большим количеством товаров или карточку товара с несколькими изображениями.
- Обновите страницу и начните прокрутку вниз.
- Проверьте, что изображения ниже первого экрана появляются по мере приближения к ним, а не загружаются все сразу при открытии страницы.
- Откройте страницу с баннерами, блогом или графическим меню и убедитесь, что изображения появляются корректно.
- Если включено кэширование, очистите кэш магазина и браузера, затем повторите проверку.
Типовые ситуации
- Если внешняя библиотека не загружается из-за сетевых ограничений или политики безопасности, отключите настройку Использовать внешнюю js библиотеку.
- Если часть изображений не появляется после изменения настроек, очистите кэш CS-Cart и браузера.
- Если проблема заметна только в конкретной теме, баннерном модуле или стороннем блоке, проверьте страницу без дополнительных модулей оптимизации изображений и конфликтующих lazy-load скриптов.
- Если изображения SVG выглядят некорректно по размеру, проверьте исходные размеры изображения: модуль сохраняет размеры SVG в стилях, чтобы избежать искажений.
История изменений
v1.2.1 от 28.04.2026
[*] Обновлен шаблон модуля
v1.2.0 от 17.03.2026
[*] Обновлен шаблон модуля
[!] Исправлено искажение логотипа и иконок
[!] Исправлено отображение изображений брендов на главной странице
v1.1.1 от 06.03.2024
[+] Добавлено ограничение стилями размера ширины и высоты изображения
v1.1.0 от 06.03.2024
[+] Добавлена возможность выбирать источник загрузки JavaScript-библиотеки
v1.0.3 от 11.12.2023
[*] Короткие PHP-теги заменены на полный формат
[*] Модуль приведен к стандартам проекта
v1.0.2 от 12.05.2023
[*] Обновлен механизм лицензирования
Обозначения:
[+] Добавлено
[-] Удалено
[*] Изменено
[!] Исправлена ошибка