События загрузки документа

Umbrella JS предоставляет удобный и лаконичный способ работы с событиями загрузки документа, обеспечивая совместимость с современными браузерами и минимальный синтаксис. Основная задача обработки событий загрузки — выполнение кода только после того, как структура DOM полностью построена и элементы доступны для манипуляций.

Событие DOMContentLoaded

В JavaScript стандартным способом является использование события DOMContentLoaded. В Umbrella JS оно обрабатывается с помощью метода ready(). Этот метод принимает функцию, которая будет выполнена после полной загрузки DOM, но до загрузки внешних ресурсов, таких как изображения или стили.

u(document).ready(function() {
    console.log("DOM полностью загружен и готов к работе");
});

Ключевые особенности метода ready():

  • Гарантирует, что все элементы DOM доступны для выборки через u().
  • Работает аналогично чистому document.addEventListener('DOMContentLoaded', ...), но синтаксис более лаконичен.
  • Можно передавать несколько функций, они будут выполнены по мере регистрации.
u(document).ready(function() {
    console.log("Функция 1");
});

u(document).ready(function() {
    console.log("Функция 2");
});

Разница между ready и load

Событие load срабатывает после полной загрузки страницы, включая все изображения, стили и внешние ресурсы. В Umbrella JS обработка load делается через стандартное событие on('load', ...):

u(window).on('load', function() {
    console.log("Все ресурсы страницы загружены");
});

Важно понимать различие:

  • ready() — для взаимодействия с DOM сразу после его готовности.
  • on('load') — для работы, когда все внешние ресурсы загружены, например, для получения размеров изображений или элементов, которые зависят от CSS.

Поддержка нескольких обработчиков

Umbrella JS автоматически поддерживает регистрацию нескольких обработчиков ready или load. Все функции выполняются в порядке их добавления. Это позволяет разделять логику и организовывать код модулями.

u(document).ready(function() {
    console.log("Инициализация навигации");
});

u(document).ready(function() {
    console.log("Инициализация слайдера");
});

Отмена события загрузки

Прямой отмены события загрузки в Umbrella JS нет, так как ready и load срабатывают однократно. Для условного выполнения можно использовать проверку состояния документа:

if (document.readyState === "complete" || document.readyState === "interactive") {
    console.log("DOM уже готов, функция выполнена сразу");
} else {
    u(document).ready(function() {
        console.log("DOM загружен позже");
    });
}

Совместимость с динамически созданными элементами

Метод ready() гарантирует, что любые элементы, созданные до момента вызова функции, доступны. Для элементов, которые будут добавлены динамически после загрузки, следует использовать делегирование событий через on():

u(document).ready(function() {
    u('body').on('click', '.dynamic-button', function() {
        console.log("Клик по динамической кнопке");
    });
});

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

  • Использовать u(document).ready() для всех операций, которые требуют доступа к DOM.
  • Для загрузки медиа и ресурсов использовать u(window).on('load', ...).
  • Разделять логику и регистрировать несколько обработчиков для модульной структуры кода.
  • Проверять состояние документа перед регистрацией, если есть риск, что скрипт может быть подключен в конце тела страницы.

Методы Umbrella JS для событий загрузки документа обеспечивают краткий и удобный синтаксис, исключая необходимость громоздких проверок состояния DOM и делегирования через чистый JavaScript. Правильное использование ready и load позволяет гарантировать, что код выполнится в нужное время, без ошибок доступа к элементам.

Оглавление