Ленивая загрузка

Для начала необходимо подключить библиотеку Toastify, которая позволяет создавать настраиваемые уведомления в браузере. Библиотека доступна через CDN или через пакетный менеджер npm.

Через CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
<script src="https://cdn.jsdelivr.net/npm/toastify-js"></script>

Через npm:

npm install toastify-js
import Toastify from "toastify-js";
import "toastify-js/src/toastify.css";

После подключения библиотеки можно использовать функцию Toastify() для создания уведомлений.

Основы создания уведомлений

Создание простого уведомления:

Toastify({
  text: "Привет, мир!",
  duration: 3000, // Время отображения в миллисекундах
}).showToast();

Ключевые параметры:

  • text — текст уведомления.
  • duration — время отображения (по умолчанию 3000 мс).
  • close — добавляет кнопку закрытия (true/false).
  • gravity — положение по вертикали ("top" или "bottom").
  • position — положение по горизонтали ("left", "center", "right").
  • backgroundColor — цвет фона уведомления.
  • stopOnFocus — при наведении мыши на уведомление, оно не исчезает (true/false).

Пример с позиционированием и цветом:

Toastify({
  text: "Сообщение об ошибке",
  duration: 4000,
  gravity: "top",
  position: "right",
  backgroundColor: "#ff6b6b",
  close: true
}).showToast();

Ленивая загрузка уведомлений

Ленивая загрузка (lazy loading) позволяет загружать уведомления только тогда, когда они действительно необходимы, снижая нагрузку на страницу и ускоряя первый рендер. В контексте Toastify это означает, что библиотека может быть подключена динамически, а уведомления создаются только при событии пользователя.

Динамическое подключение через JavaScript:

function loadToastify(callback) {
  if (!window.Toastify) {
    const link = document.createElement("link");
    link.rel = "stylesheet";
    link.href = "https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css";
    document.head.appendChild(link);

    const script = document.createElement("script");
    script.src = "https://cdn.jsdelivr.net/npm/toastify-js";
    script.onl oad = callback;
    document.body.appendChild(script);
  } else {
    callback();
  }
}

Создание уведомления после загрузки библиотеки:

loadToastify(() => {
  Toastify({
    text: "Уведомление загружено лениво",
    duration: 3000,
    backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)"
  }).showToast();
});

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

Интеграция с событиями пользователя

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

Пример с кнопкой:

document.getElementById("show-toast").addEventListener("click", () => {
  loadToastify(() => {
    Toastify({
      text: "Кнопка нажата",
      duration: 2500,
      gravity: "bottom",
      position: "center",
      backgroundColor: "#007bff",
    }).showToast();
  });
});

В этом примере Toastify подключается только при первом клике, что экономит ресурсы до момента необходимости.

Продвинутая кастомизация уведомлений

Настройка внешнего вида через CSS и классы:

Toastify({
  text: "Кастомное уведомление",
  className: "custom-toast",
  duration: 4000,
  stopOnFocus: true
}).showToast();
.custom-toast {
  font-weight: bold;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(to right, #ff7e5f, #feb47b);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

Использование callback-функций при закрытии уведомления:

Toastify({
  text: "Уведомление с callback",
  duration: 3000,
  onClick: () => console.log("Нажато уведомление"),
  onClose: () => console.log("Уведомление закрыто")
}).showToast();

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

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

  1. Подключать библиотеку лениво только при необходимости.
  2. Избегать одновременного отображения большого количества уведомлений — использовать очередь.
  3. Для повторяющихся уведомлений использовать кеширование параметров, чтобы не создавать новый объект Toastify каждый раз.
  4. Минимизировать инлайновые стили и отдавать предпочтение CSS-классам для единообразия.

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

Оглавление