Подключение через CDN

Для использования библиотеки iziToast в проекте нет необходимости устанавливать её через npm или yarn. Достаточно подключить файлы CSS и JavaScript напрямую через CDN. Такой подход ускоряет интеграцию и подходит для прототипов, небольших проектов или статических страниц.

Подключение CSS и JS

Основной принцип подключения заключается в добавлении ссылок на стили и скрипт в HTML-документ. Пример минимального подключения через CDN:

<!-- iziToast CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/izitoast@1.4.0/dist/css/iziToast.min.css">

<!-- iziToast JS -->
<script src="https://cdn.jsdelivr.net/npm/izitoast@1.4.0/dist/js/iziToast.min.js"></script>

Важно: порядок подключения имеет значение. Сначала загружается CSS, затем JS. Это обеспечивает корректное отображение уведомлений и доступность всех методов библиотеки.

Поддержка различных версий

CDN позволяет использовать как последнюю стабильную версию, так и конкретную версию iziToast. Для фиксации версии используют точный номер:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/izitoast@1.3.0/dist/css/iziToast.min.css">
<script src="https://cdn.jsdelivr.net/npm/izitoast@1.3.0/dist/js/iziToast.min.js"></script>

Это важно при разработке проекта, где необходимо гарантировать совместимость с другими библиотеками и скриптами.

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

Для ускорения загрузки страницы и предотвращения блокировки рендеринга HTML можно подключать iziToast с атрибутом defer:

<script src="https://cdn.jsdelivr.net/npm/izitoast@1.4.0/dist/js/iziToast.min.js" defer></script>

В этом случае скрипт выполнится только после полной загрузки DOM, что позволяет безопасно вызывать методы iziToast в скриптах, размещённых после подключения.

Использование с современными сборщиками

Даже при подключении через CDN, iziToast можно использовать совместно с ES6-модулями:

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/izitoast@1.4.0/dist/js/iziToast.min.js';

  iziToast.success({
      title: 'Успех',
      message: 'Уведомление загружено через CDN',
      position: 'topRight'
  });
</script>

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

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

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

iziToast.settings({
    timeout: 5000,
    position: 'topRight',
    transitionIn: 'fadeInDown',
    transitionOut: 'fadeOutUp',
});

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

Пример базового уведомления

После подключения iziToast через CDN создание уведомлений происходит в один вызов:

iziToast.info({
    title: 'Информация',
    message: 'Пример уведомления через CDN',
});

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

Особенности работы через CDN

  • Скорость интеграции — нет необходимости устанавливать библиотеку локально.
  • Зависимость от сети — если CDN недоступен, уведомления не загрузятся. Для критичных проектов рекомендуется локальное хранение файлов.
  • Совместимость с другими библиотеками — важно проверять версию iziToast, чтобы избежать конфликтов с CSS и JavaScript других плагинов.

Резюме по подключению

  1. Подключить CSS iziToast в <head>.
  2. Подключить JS iziToast перед закрывающим тегом </body> или с атрибутом defer.
  3. При необходимости зафиксировать версию для стабильной работы.
  4. Использовать глобальные настройки для унификации уведомлений.
  5. Убедиться, что CDN доступен в рабочей среде.

Такое подключение обеспечивает готовность проекта к использованию всех возможностей iziToast без локальной установки и упрощает быстрый старт.

Оглавление