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