Автоматический запуск при загрузке страницы

Для автоматического запуска интерактивного руководства на сайте с использованием библиотеки Intro.js необходимо инициировать её вызов в момент полной загрузки DOM. Основной подход заключается в использовании обработчика событий DOMContentLoaded или window.onload. Это гарантирует, что все элементы страницы будут доступны для корректного отображения подсказок.

document.addEventListener("DOMContentLoaded", function() {
    introJs().start();
});

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

window.addEventListener("load", function() {
    introJs().start();
});

Конфигурация шага при автоматическом запуске

Intro.js позволяет детально настраивать каждый шаг тура с помощью метода setOptions. Это полезно, если необходимо задать конкретные элементы для подсветки и описания:

document.addEventListener("DOMContentLoaded", function() {
    introJs().setOptions({
        steps: [
            {
                element: '#menu',
                intro: 'Основное меню сайта позволяет быстро перемещаться между разделами.',
                position: 'right'
            },
            {
                element: '#search',
                intro: 'Поле поиска помогает найти нужный контент.',
                position: 'bottom'
            },
            {
                element: '#profile',
                intro: 'Здесь отображается информация о пользователе и настройки аккаунта.',
                position: 'left'
            }
        ],
        showStepNumbers: true,
        exitOnOverlayClick: false,
        showBullets: true,
        nextLabel: 'Далее',
        prevLabel: 'Назад',
        skipLabel: 'Пропустить',
        doneLabel: 'Готово'
    }).start();
});

Ключевые моменты настройки шагов:

  • element – селектор DOM-элемента, который будет подсвечен. Можно использовать ID, класс или CSS-селектор.
  • intro – текст подсказки, который отображается в тултипе.
  • position – позиция подсказки относительно элемента (top, bottom, left, right, floating).

Автоматический запуск с задержкой

Иногда требуется запуск тура через некоторое время после загрузки страницы. Для этого применяется setTimeout:

window.addEventListener("load", function() {
    setTimeout(function() {
        introJs().start();
    }, 2000); // задержка 2 секунды
});

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

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

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

window.addEventListener("load", function() {
    if (!localStorage.getItem('introSeen')) {
        introJs().start();
        localStorage.setItem('introSeen', 'true');
    }
});

Таким образом, интро запускается автоматически только при первом посещении страницы.

Интеграция с SPA (Single Page Application)

В приложениях с динамической подгрузкой контента важно инициировать Intro.js после рендеринга нужных элементов. Для этого используется callback после завершения рендеринга или отслеживание изменений DOM через MutationObserver:

const observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (document.querySelector('#menu')) {
            introJs().start();
            observer.disconnect();
        }
    });
});

observer.observe(document.body, { childList: true, subtree: true });

Такой подход гарантирует, что автоматический запуск не произойдёт до появления целевых элементов.

Настройка глобальных опций

При автоматическом запуске удобно определить глобальные параметры, которые будут применяться ко всем шагам:

document.addEventListener("DOMContentLoaded", function() {
    introJs().setOptions({
        tooltipClass: 'customTooltip',
        highlightClass: 'customHighlight',
        scrollToElement: true,
        exitOnEsc: true
    }).start();
});
  • tooltipClass – позволяет использовать кастомные стили для тултипов.
  • highlightClass – определяет класс для подсвечиваемого элемента.
  • scrollToElement – автоматически прокручивает страницу к текущему шагу.
  • exitOnEsc – разрешает пользователю завершить интро клавишей Esc.

Резюме практических приёмов

  1. Использование DOMContentLoaded или load для корректного запуска после загрузки страницы.
  2. Настройка шагов через setOptions с точными селекторами и позиционированием.
  3. Возможность задержки старта с помощью setTimeout.
  4. Сохранение состояния пользователя через localStorage, чтобы интро не повторялось.
  5. Интеграция с динамическими SPA через MutationObserver.
  6. Определение глобальных стилей и поведения через параметры библиотеки.

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

Оглавление