Параметр loading

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

Назначение параметра loading

Параметр loading используется для отображения временного состояния модального окна до того, как будет загружен основной контент. В стандартной конфигурации Featherlight можно определить текст, HTML-разметку или функцию, возвращающую HTML, которая будет показана пользователю во время загрузки.

Это особенно важно при работе с асинхронными источниками данных, например:

  • AJAX-запросами,
  • динамически создаваемым HTML,
  • медленно загружаемыми изображениями или видео.

Использование loading позволяет избежать пустого окна и улучшает пользовательский опыт.

Синтаксис

Параметр задается при инициализации окна через $.featherlight() или в опциях при вызове:

$.featherlight('content.html', {
    loading: 'Загрузка...'
});

В этом примере текст "Загрузка..." будет отображён до полной загрузки содержимого content.html.

Параметр loading может быть:

  1. Строкой — простой текст или HTML-разметка:
loading: '<div class="spinner"></div> Подождите...'
  1. Функцией, возвращающей HTML-контент. Используется для динамического формирования индикатора загрузки:
loading: function() {
    return '<div class="spinner"></div> Загружаем данные...';
}

Взаимодействие с другими параметрами

loading тесно связан с beforeOpen, afterContent и afterOpen:

  • beforeOpen вызывается перед отображением окна. Здесь можно подготовить контент, но индикатор loading ещё не отображён.
  • afterContent срабатывает после вставки основного контента. На этом этапе индикатор loading автоматически скрывается.
  • afterOpen срабатывает после того, как окно полностью открылось, включая замену загрузочного индикатора на основной контент.

Пример:

$.featherlight('content.html', {
    loading: '<div class="spinner"></div> Пожалуйста, подождите...',
    beforeOpen: function(event) {
        console.log('Модальное окно готовится к открытию');
    },
    afterContent: function(event) {
        console.log('Основной контент загружен, индикатор скрыт');
    }
});

Асинхронная загрузка контента

Чаще всего loading используется вместе с AJAX или динамическим формированием HTML. Featherlight автоматически показывает содержимое параметра loading до завершения загрузки:

$.featherlight({
    ajax: 'data.html',
    loading: '<div class="spinner"></div> Загрузка данных...',
});

Последовательность действий:

  1. Отображается окно с контентом loading.
  2. Отправляется AJAX-запрос к data.html.
  3. После успешного получения данных содержимое loading заменяется на HTML из ответа.

Если AJAX-запрос занимает значительное время, индикатор обеспечивает визуальную обратную связь пользователю.

Кастомизация индикатора

Для создания более сложных индикаторов можно использовать CSS-анимации или библиотеки спиннеров. Featherlight позволяет вставлять любой HTML-код через loading:

loading: `
    <div class="custom-loader">
        <div class="dot dot1"></div>
        <div class="dot dot2"></div>
        <div class="dot dot3"></div>
        Загрузка...
    </div>
`

CSS-анимация обеспечит плавное движение точек, создавая эффект активного ожидания.

Особенности работы

  • Если контент загружается мгновенно, индикатор loading может быть виден очень короткое время или даже не появиться.
  • Featherlight автоматически скрывает индикатор после вставки основного контента, дополнительных действий по его удалению не требуется.
  • Можно использовать разные индикаторы для разных окон, задавая loading индивидуально для каждого вызова.

Практические рекомендации

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

Параметр loading является важным инструментом для повышения UX при работе с модальными окнами Featherlight. Он обеспечивает информативность интерфейса, улучшает восприятие контента и упрощает работу с асинхронными данными.

Оглавление