Аналог $(document).ready() без jQuery: загрузка DOM в JavaScript

Быстрый ответ

Если вы хотите воссоздать поведение $(document).ready() из jQuery, используя только нативный JavaScript, вам стоит обратиться к событию DOMContentLoaded. Это событие выполняется, когда DOM полностью загружен, но ещё не произошла загрузка изображений и сторонних ресурсов.

document.addEventListener('DOMContentLoaded', function() {
    // Ваш код находится здесь...
});

Работа с устаревшими браузерами

Если вам приходится сталкиваться с устаревшими браузерами, такими как IE8 и старше, придется немного проявить изобретательность. Воспользуйтесь свойством readyState, следя за его переходом в состояние 'interactive', что сигнализирует о полной загрузке DOM.

document.onreadystatechange = function () {
    if (document.readyState === 'interactive') {
        // Пришло время для действий...
    }
};

Не забывайте, что подробное описание различных значений readyState можно найти в документации MDN.

Универсальные контрольные функции

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

function domReady(callback) {
    if (document.readyState === 'interactive' || document.readyState === 'complete') {
        callback();
    } else {
        document.addEventListener('DOMContentLoaded', callback);
    }
}

function windowReady(callback) {
    if (document.readyState === 'complete') {
        callback();
    } else {
        window.addEventListener('load', callback);
    }
}

domReady(() => {
    // DOM полностью загружен, начинаем работу...
});

windowReady(() => {
    // Все элементы загружены, можно праздновать!
});

Промисы – продвинутый уровень

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

const domReadyPromise = new Promise((resolve) => {
    domReady(resolve);
});

domReadyPromise.then(() => {
    // Теперь, когда DOM готов, можно выполнять код
});

Отказ от jQuery – выбор в пользу простоты

Не злоупотребляйте использованием jQuery, если существуют легковесные альтернативы, наподобие тех, что описаны на 'http://youmightnotneedjquery.com/#ready'. Идите по пути упрощения и увеличения производительности!

Визуализация

Представьте готовность вашего кода как увлекательное театральное представление. Когда поднимается занавес (🎭🍿🎟️✨), документ полностью загружен, и наступает время вашего собственного представления!

document.addEventListener('DOMContentLoaded', function() {
    // Представление началось, аудиторию охватывает восторг...
});

TypeScript обеспечивает типизацию

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

function domReady(callback: () => void): void {
    // Реализация остаётся без изменений
}

Не забудьте подчистить после себя, удалив обработчики событий { once: true }, чтобы не вызвать "утечки памяти".

document.addEventListener('DOMContentLoaded', function() {
    // Ваш код размещается здесь...
}, { once: true });

Учтите время загрузки

Событие DOMContentLoaded отличается от window.onload. Второе срабатывает после полной загрузки всех элементов страницы, включая изображения и iframe. Используя различные слушатели, можно точно контролировать процесс загрузки элементов.

Попробуйте на практике

Ниже представлены несколько примеров с юмористическим подтекстом, которые вы можете воспроизвести. Помните, что наилучший способ освоить использование .readyState — это попрактиковаться.

// Для самых современных браузеров
if (document.readyState !== 'loading') {
   // Если DOM уже готов, выполните нужные действия
} else {
   document.addEventListener('DOMContentLoaded', function() {
      // Теперь, когда DOM готов, мы можем продвигаться дальше
   });
}

// Для тех, кто предпочитает классику и до сих пор использует ретро-браузеры вроде IE8
document.onreadystatechange = function () {
   if (document.readyState === 'complete') {
      // Пришло время для старых добрых традиций. Запустите свой код!
   }
};

Ознакомьтесь с библиотеками вроде domReady.js, которые предлагают простые и функциональные решения, готовые к использованию прямо из коробки.

Полезные материалы

1. Document: DOMContentLoaded event – Web APIs | MDN
2. Page: DOMContentLoaded, load, beforeunload, unload
3. Running code when the document is ready
4. HTML DOM Document addEventListener() Method
5. Native JavaScript Equivalents of jQuery Methods: the DOM and Forms — SitePoint
6. You Might Not Need jQuery
7. javascript – $(document).ready equivalent without jQuery – Stack Overflow