Ленивая загрузка

Модуль LazyLoad реализует ленивую загрузку изображений в слайдах. Изображения загружаются только когда слайд становится видимым или близок к видимой области. Это значительно улучшает производительность и ускоряет первоначальную загрузку страницы.

Основные возможности

• ✅ Автоматическая загрузка изображений при приближении к видимой области
• ✅ Предзагрузка соседних слайдов
• ✅ Поддержка srcset для адаптивных изображений
• ✅ Spinner/loader во время загрузки
• ✅ События загрузки и ошибок
• ✅ Публичное API для ручной загрузки

Использование

Базовая настройка

Для использования LazyLoad нужно:

1. Включить опцию lazy
2. Заменить атрибуты src и srcset на data-src и data-srcset

С адаптивными изображениями (srcset)

Расширенные настройки

Опции

lazy

• Тип: boolean | { preloadPrevNext?: number }
• По умолчанию: false

Включает ленивую загрузку изображений.

lazy.preloadPrevNext

• Тип: number
• По умолчанию: 1

Количество соседних слайдов для предзагрузки с каждой стороны от активного слайда.

События

lazyLoaded

Вызывается когда изображение успешно загружено.

Параметры:

• img (HTMLImageElement) - загруженное изображение
• slideIndex (number) - индекс слайда

lazyLoadError

Вызывается при ошибке загрузки изображения.

Параметры:

• img (HTMLImageElement) - изображение с ошибкой
• slideIndex (number) - индекс слайда

Публичное API

loadAll()

Загружает все оставшиеся изображения немедленно.

loadSlide(index)

Загружает изображения конкретного слайда.

CSS-классы

.tvist-v1__spinner

Индикатор загрузки (spinner), отображается во время загрузки изображения.

.tvist-v1__slide--loading

Класс применяется к слайду во время загрузки изображения.

Кастомизация стилей

Вы можете настроить внешний вид спиннера и состояния загрузки через CSS-переменные:

Или переопределить стили напрямую:

Примеры использования

С autoplay

С галереей и thumbnails

Обработка ошибок загрузки

Производительность

LazyLoad значительно улучшает производительность:

• ⚡ Быстрая первоначальная загрузка страницы
• 📉 Меньше трафика для пользователей
• 🎯 Загрузка только нужных изображений
• 💾 Экономия памяти браузера

Совместимость с другими модулями

LazyLoad отлично работает с:

• ✅ Loop - корректная загрузка клонированных слайдов
• ✅ Autoplay - изображения загружаются до перехода
• ✅ Thumbs - ленивая загрузка для обоих слайдеров
• ✅ Grid - поддержка grid layout
• ✅ Effects (fade, cube) - загрузка перед эффектами

Интерактивный пример