Как узнать что текущая страница загрузилась?

Методы определения полной загрузки страницы

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

• Инициализации сторонних библиотек
• Работы с DOM-элементами
• Показа индикаторов загрузки
• Отправки аналитики

Основные подходы:

1. Событие DOMContentLoaded

Срабатывает, когда HTML-документ полностью загружен и разобран, без ожидания стилей, изображений и поддокументов.

document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM полностью загружен и разобран');
    // Здесь можно безопасно работать с DOM
});

2. Событие load

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

window.addEventListener('load', function() {
    console.log('Страница полностью загружена');
    // Все ресурсы (изображения, стили, скрипты) готовы
});

3. Событие beforeunload и unload

Полезны для определения момента выхода со страницы:

window.addEventListener('beforeunload', function(event) {
    // Вызывается перед выгрузкой документа
});

window.addEventListener('unload', function() {
    // Страница выгружается
});

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

Комбинированный подход

Часто используют оба события для разных задач:

// Быстрая инициализация после DOM готовности
document.addEventListener('DOMContentLoaded', function() {
    initializeCoreComponents();
    setupEventListeners();
});

// Дополнительная инициализация после полной загрузки
window.addEventListener('load', function() {
    initializeHeavyComponents();
    trackPageLoadAnalytics();
});

Работа с изображениями и ресурсами

Для отслеживания загрузки конкретных ресурсов:

document.addEventListener('DOMContentLoaded', function() {
    const images = document.querySelectorAll('img');
    let loadedImages = 0;
    
    images.forEach(img => {
        if (img.complete) {
            loadedImages++;
        } else {
            img.addEventListener('load', function() {
                loadedImages++;
                if (loadedImages === images.length) {
                    console.log('Все изображения загружены');
                }
            });
        }
    });
});

Современные подходы и Performance API

Performance Timeline API

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

window.addEventListener('load', function() {
    const perfData = performance.getEntriesByType('navigation')[0];
    console.log('Время загрузки DOM:', perfData.domComplete);
    console.log('Полное время загрузки:', perfData.loadEventEnd);
    
    // Метрики Core Web Vitals
    const paintEntries = performance.getEntriesByType('paint');
    paintEntries.forEach(entry => {
        console.log(`${entry.name}: ${entry.startTime}ms`);
    });
});

MutationObserver для динамического контента

Для SPA и динамически загружаемого контента:

const observer = new MutationObserver(function(mutations) {
    // Отслеживание изменений в DOM
});

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

Особенности для SPA (Single Page Applications)

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

// Пример для React
useEffect(() => {
    // Компонент смонтирован
    return () => {
        // Компонент будет размонтирован
    };
}, []);

// Пример для Vue
mounted() {
    // Компонент смонтирован
}

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

1. Для быстрой инициализации используйте DOMContentLoaded
2. Для работы с размерами элементов дожидайтесь load (стили должны быть загружены)
3. Для аналитики используйте load или Performance API
4. В SPA полагайтесь на хуки фреймворка и роутера
5. Для ленивой загрузки используйте Intersection Observer API

Важные нюансы:

• Событие DOMContentLoaded не ждет асинхронных скриптов с async
• load может не сработать, если есть скрипты с ошибками
• В современных браузерах есть событие readystatechange с состояниями loading, interactive, complete
• Для iframe существуют аналогичные события на объекте iframe

Выбор метода зависит от конкретной задачи: для большинства манипуляций с DOM достаточно DOMContentLoaded, для работы с размерами элементов и ресурсами нужен load, а для сложных SPA лучше использовать механизмы фреймворка.