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

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

Если вам необходимо выполнить код JavaScript сразу по факту готовности DOM, воспользуйтесь событием DOMContentLoaded:

document.addEventListener('DOMContentLoaded', () => {
  // Весь код, расположенный здесь, будет выполнен сразу после готовности DOM
});

А если требуется дождаться загрузки всех ресурсов, включая графику, используйте window.onload:

window.onload = () => {
  // Весь код отсюда будет выполнен, только когда полностью завершится загрузка страницы
};

Выбирайте, что для вас первостепеннее: скорость (DOMContentLoaded) или минимальное количество ошибок (window.onload).

Варианты запуска функции по завершении загрузки страницы

Существуют разнообразные методы запуска функции после полной загрузки страницы, и каждый из них имеет свои особенности.

Классический метод: window.onload

window.onload = () => {
  console.log('Все ресурсы загружены, как в барабане боевого револьвера готовы патроны');
};

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

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

Для любителей театральных сравнений: document.onreadystatechange

document.onreadystatechange = () => {
  if (document.readyState === 'complete') {
    // Показ спектакля будет окончен только тогда, когда примадонна закончит своё выступление.
  }
};

Состояние загрузки страницы постепенно меняется. В итоге, когда наступает "большой финал" (т.е. состояние становится 'complete'), готовность страницы окончательна.

Для тех, кто ещё использует jQuery: событие load

Следует также рассмотреть этот вариант:

$(window).on("load", function() {
  console.log("Все ресурсы, в том числе графика, успешно загружены!");
});

Распространённые ловушки и ошибки

Не столь безопасный выбор: DOMContentLoaded

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

Избегайте: нестандартные методы

Те, кто пытается быть излишне оригинальным и использует события onload для тегов <img> и других, легко могут попасть в ловушку неподдерживаемых функций. Простыми словами, лучше избегать подобных приёмов.

Источник замешательства: события выгрузки

Не путайте объем работ с window.onunload и window.onbeforeunload. Эти события подходят для работы в других контекстах и не имеют никакого отношения к загрузке страницы.

Приёмы работы с событиями загрузки

Точец внимания: обработчик события load

Инструкция addEventListener позволяет перехватить момент полной загрузки сайта наиболее эффективно при помощи события load:

window.addEventListener('load', () => {
  console.log('Все ресурсы успешно загружены!');
});

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

Этап                 | Событие                  | Ваша функция
---------------------|--------------------------|-------------------
Базовая структура    | Загружен HTML            | 🚧
Основной каркас      | Загружены внешние скрипты | 🏗️🚧
Детали               | Загружены изображения/стили | 🖼️🎨
Готовность к работе  | Страница полностью загружена | 🏗️✨
Пользовательский ввод| Функция запущена         | 🎀✂️🎉

window.addEventListener('load', function() {
    // 🎀✂️ – Ваш код здесь: он будет запущен как только страница будет готова к работе!
});

Изучение событий загрузки и сопутствующих аспектов

Готовность: DOMContentLoaded

Событие DOMContentLoaded идеально подходит, если вам нужен быстрый старт. Ведь оно срабатывает по факту готовности HTML.

Порядок событий

Событие DOMContentLoaded, которое предшествует window.onload, отрабатывает первым, позволяя сайту стать интерактивным как можно скорее.

Динамическая загрузка контента

Если информация на вашей странице обновляется динамически, DOMContentLoaded и window.onload могут не дать вам всю необходимую информацию. Иногда необходим гибкий подход: проверка наличия элементов или событий после выполнения кода.

Отслеживание будущих загрузок

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

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

1. Событие load в window – Web API | MDN — подробная наработка по событию window.onload.
2. .ready() | Документация API jQuery — как используется метод .ready() в jQuery для выполнения кода после загрузки DOM.
3. HTML DOM метод addEventListener() — управление событиями браузера на W3Schools.
4. javascript – window.onload vs document.onload – Stack Overflow — Сравнение window.onload и document.onload на ресурсе Stack Overflow.
5. Can I use...Таблицы поддержки для HTML5, CSS3 и др. — информация о совместимости браузеров с событием DOMContentLoaded.
6. Страница: DOMContentLoaded, load, beforeunload, unload | JavaScript.info — различные события загрузки страницы и их обработка в JavaScript.
7. Событие DOMContentLoaded в документе – Web API | MDN — справочная информация о событии DOMContentLoaded на MDN.