Запуск функции после полной загрузки страницы в JavaScript

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

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

window.onload = () => alert('Страница загружена полностью. Пора приступать к действию! 🎉');

При работе с jQuery предпочтительнее использовать функцию $(window).on('load', ...):

$(window).on('load', () => alert('Сообщение от jQuery: страница загружена полностью!'));

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

document.addEventListener("DOMContentLoaded", () => {
  // Узлы DOM уже доступны для манипуляций.
});

Обратите внимание: событие DOMContentLoaded может произойти до завершения загрузки некоторых элементов, например, изображений. Это событие рекомендуется использовать для операций, прямо связанных с DOM.

Обработка состояния готовности

Можно сравнить контроль за состоянием готовности документа с ожиданием доставки пиццы:

document.addEventListener('readystatechange', event => {
  if (event.target.readyState === "complete") {
    // Пицца прибыла! Или же: страница полностью загружена. 🍕
  }
});

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

Использование современных методов за рамками onload

Отслеживание динамических изменений с помощью MutationObserver

Если содержимое страницы загружается асинхронно, MutationObserver поможет его мониторить:

const observer = new MutationObserver(mutations => {
  // Изменения в DOM становятся реальностью, к которой нужно быть готовым.
});
observer.observe(document, { childList: true, subtree: true });

Подробнее об этом расскажет наш спикер на видео

Отслеживание загрузки конкретных элементов

Если нужно дождаться загрузки определенного элемента, например, изображения или видео, перед запуском функции:

var img = document.querySelector('img');
img.addEventListener('load', () => {
  // Изображение загружено! Это похоже на включение света во тьме.
});

Стратегии управления загрузкой

Преимущество window.onload

Window.onload идеально подходит, когда требуется дождаться загрузки всех ресурсов страницы.

Достоинства DOMContentLoaded

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

Понимание кода готовности jQuery

Событие $(document).ready() в jQuery срабатывает, когда DOM готов, но еще не загружены, например, изображения или стили.

Переключение на режим 'Interactive' для быстрого взаимодействия

Состояние 'interactive' позволяет запустить скрипты чуть раньше, что актуально для сценариев, не требующих полной загрузки страницы.

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

Представьте загрузку веб-страницы как сбор пазла:

🧩 Структура (HTML) 🧩 Стили (CSS) 🧩 Взаимодействие (JavaScript)

🔄 Процесс сборки:

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

✅ Полная загрузка (страница полностью загружена):

Установка последней детали вызывает ощущение удовлетворения — все детали на своих местах.

🚀 Запуск функции:

Теперь можно активировать действие с помощью кнопки!

Приспособление к особым сценариям

Проблема медленных сетей

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

Будьте внимательны к разнице в обработке браузерами

Все браузеры обрабатывают события по-разному. Рекомендуется провести тестирование в разных браузерах, возможно, с использованием автоматизированных инструментов, таких как Browsersync.

Приоритет доступности

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

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

1. Window: load event – Web APIs | MDN – Documentation on window.onload from MDN.
2. onload Event – Информация с W3Schools о событии onload.
3. .ready() | jQuery API Documentation – Подробное описание $(document).ready() от jQuery.
4. javascript – window.onload vs $(document).ready() – Stack Overflow – Дискуссия о разнице между window.onload и $(document).ready() на форуме Stack Overflow.
5. MutationObserver – Web APIs | MDN – Облегченное руководство по MutationObservers от MDN.
6. HTML Standard – HTML5 standards для опытных пользователей и разработчиков.