1.5 Прелоадер (индикатор загрузки)link

SFLoaderPlugin предоставляет встроенный визуальный прелоадер, который отображается при начальной загрузке компонентов и ассетов.
Это помогает избежать отображения неполной верстки и повысить восприятие скорости загрузки.

Назначениеlink

  • Показывает пользователю, что идёт загрузка интерфейса;
  • Скрывает DOM до подключения нужных JS/CSS и шаблонов;
  • Повышает UX при медленных соединениях.

Как работаетlink

  1. При запуске плагина, если нет кэша — запускается прелоадер (runPreloader()).
  2. Устанавливается document.body.style.opacity = '0' для сокрытия содержимого.
  3. В runPreloader() создаётся DOM-блок <div class="sf-loader">, содержащий SVG-анимацию и текст.
  4. После завершения загрузки ассетов — вызывается stopPreloader(), и прелоадер исчезает, body.style.opacity = '1'.

Настройка прелоадераlink

new SFLoaderPlugin({
    preloader: {
        // ширина
        width: 66,
        // высота   
        height: 100,
        // цвет svg картинки
        color: "#E81123"
    },
});

Методыlink

  • runPreloader() — показывает и запускает прелоадер;
  • rotatePreloader() — запускает SVG-анимацию;
  • stopAnimation() — останавливает таймер анимации;
  • stopPreloader() — скрывает прелоадер, возвращает body.style.opacity = 1.

Условия отображенияlink

  • Показывается, если нет кэша (SF_PLUGIN_LIST-<pageHash> не найден);
  • Используется только при первом запуске (this.firstLoad === true);
  • Прелоадер можно отключить: preloader: false.

Прелоадер НЕ отображается, еслиlink

  • Все ассеты уже загружены и кэшированы;
  • Задан preloader: false или usePreloader = false;
  • Компоненты встроены вручную (например, при SSR/SPA сборке).