Индикация загрузки

Featherlight — это лёгкая и минималистичная библиотека для создания модальных окон на JavaScript и jQuery. Одной из ключевых задач при работе с динамическим контентом является корректная индикация загрузки, которая позволяет пользователю понимать, что данные загружаются и обработка продолжается.

Основные концепции

Featherlight использует подход ленивой загрузки контента, что делает его особенно полезным при работе с AJAX, изображениями и другими асинхронными ресурсами. Индикация загрузки в этом контексте играет роль визуального маркера процесса загрузки, предотвращая ощущение «замороженности» интерфейса.

Типы контента, требующие индикации загрузки:

  • AJAX-запросы и динамический HTML.
  • Изображения и мультимедийные файлы.
  • Контент с внешних API или CDN.

Структура индикации загрузки

Featherlight позволяет настроить спиннер или текстовое уведомление до полной загрузки контента. Для этого используется параметр beforeOpen и события жизненного цикла (beforeContent, afterContent, afterOpen).

Пример базовой конфигурации:

$.featherlight({
    ajax: '/data/content.html',
    beforeOpen: function(event){
        this.$content.html('<div class="featherlight-spinner">Загрузка...</div>');
    },
    afterContent: function(){
        this.$content.find('.featherlight-spinner').remove();
    }
});

Разбор кода:

  • beforeOpen вызывается до создания модального окна, здесь можно вставить спиннер или текст «Загрузка».
  • afterContent выполняется после подгрузки контента, что позволяет удалить индикатор и показать основной контент.

Пользовательские спиннеры

Featherlight не ограничивает визуальное оформление индикатора. Можно использовать CSS-анимации, GIF или SVG:

.featherlight-spinner {
    width: 50px;
    height: 50px;
    margin: 50px auto;
    border: 5px solid #ccc;
    border-top: 5px solid #333;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

Этот спиннер можно динамически вставлять через beforeOpen, а после загрузки — удалять через afterContent.

Работа с AJAX

Для асинхронного контента часто используется параметр ajax:

$('.open-modal').featherlight({
    ajax: '/user/profile.html',
    beforeOpen: function(){
        this.$content.html('<p>Подождите, идет загрузка...</p>');
    },
    afterContent: function(){
        this.$content.find('p').remove();
    }
});

Особенности:

  • Featherlight автоматически подставляет AJAX-контент в окно после загрузки.
  • beforeOpen и afterContent позволяют обеспечить плавный UX, показывая индикатор до момента полной загрузки.

Отложенная загрузка изображений

Для изображений, особенно крупных, имеет смысл использовать отложенную загрузку с индикацией:

$.featherlight('<img src="large-image.jpg" />', {
    beforeOpen: function(){
        this.$content.html('<div class="featherlight-spinner"></div>');
    },
    afterContent: function(){
        var img = this.$content.find('img');
        img.on('load', function(){
            $('.featherlight-spinner').remove();
            img.show();
        });
        img.hide();
    }
});

Принцип работы:

  • Спиннер отображается до полной загрузки изображения.
  • Когда событие load срабатывает, спиннер удаляется, и изображение становится видимым.
  • Это предотвращает мерцание пустого окна при медленном соединении.

Настройка событий жизненного цикла

Featherlight предоставляет множество событий, которые можно использовать для управления индикаторами:

  • beforeOpen — до создания окна.
  • afterOpen — после создания окна.
  • beforeContent — перед добавлением контента.
  • afterContent — после подгрузки контента.
  • beforeClose — перед закрытием окна.
  • afterClose — после закрытия окна.

Для индикации загрузки чаще всего применяются beforeOpen, beforeContent и afterContent.

Интеграция с сторонними библиотеками

Спиннеры и индикаторы можно подключать через Spin.js, Lottie или любые CSS-анимации. Пример с Spin.js:

var spinner;
$.featherlight({
    ajax: '/data/content.html',
    beforeOpen: function(){
        spinner = new Spinner().spin(this.$content[0]);
    },
    afterContent: function(){
        spinner.stop();
    }
});

Такой подход позволяет использовать сложные анимации без изменения структуры Featherlight.

Рекомендации по UX

  • Спиннер должен занимать центр модального окна.
  • Индикатор не должен блокировать DOM-операции, только информировать пользователя.
  • В случае медленной загрузки рекомендуется добавлять текстовое уведомление с примерным временем ожидания.
  • Для мультимедийного контента стоит предварительно загружать миниатюры, чтобы окно не пустовало.

Оптимизация производительности

  • Использовать отложенную загрузку больших ресурсов.
  • Минимизировать DOM-операции при вставке спиннера.
  • Для повторного открытия одного и того же окна сохранять кэшированный контент, чтобы не показывать спиннер повторно.

Featherlight, благодаря своей лёгкости, предоставляет гибкий механизм для индикации загрузки. Сочетание событий жизненного цикла, динамических спиннеров и поддержки AJAX позволяет создавать плавные и отзывчивые модальные окна.

Оглавление