Получить профессию в Skypro
"Запуск JavaScript после загрузки страницы: событие onload и другие"
Быстрый ответ
Для того чтобы активировать JavaScript непосредственно после полной загрузки HTML-документа, используйте событие DOMContentLoaded:
document.addEventListener("DOMContentLoaded", function() {
// Ваш код находится здесь
// Он будет исполняться только после законченной загрузки страницы
});Если ваши скрипты требуют полной загрузки всех ресурсов страницы, включая изображения, употребляйте событие load:
window.addEventListener("load", function() {
// Ваш код здесь
// Этот код исполняется только после завершённой загрузки всех ресурсов страницы
});Атрибут defer позволит запустить код непосредственно после загрузки HTML, и в то же время не будет блокировать процесс загрузки страницы:
<script src="path-to-your-script.js" defer></script>Поместите отложенные скрипты в заголовок <head>, чтобы обеспечить правильный порядок загрузки HTML и JavaScript.
Выбор между: defer, async, или встроенными скриптами
В зависимости от ситуации, может потребоваться использование defer, async или непосредственное встраивание скриптов для оптимальной работы вашего сайта.
Атрибут defer
Используйте defer для отложенного запуска скриптов, которые могут быть запущены только после полного прочтения документа и перед срабатыванием DOMContentLoaded.
- Скрипты исполняются в порядке их указания, следуя принципу очередности.
- Атрибут влияет только на скрипты, загружаемые из внешних источников (с использованием атрибута
src).
Атрибут async
Async идеально подходит для скриптов, запуск которых происходит параллельно с обработкой страницы.
- Скрипты выполняются по мере загрузки, порядок их исполнения определяется скоростью загрузки, а не размещением скриптов в документе.
- Это подходит для автономных скриптов, которые не зависят от других скриптов.
Встроенные скрипты
Встроенные теги <script>, расположенные перед тегом </body>, будут исполняться после завершения анализа HTML, но перед полной загрузкой всех ресурсов страницы. Они идеально подходят для универсальных скриптов.
Использование jQuery и обеспечение кросс-браузерной совместимости
Если в ваших проектах уже присутствует jQuery, вы можете воспользоваться этой библиотекой для запуска кода, как только DOM станет полностью доступным, или после полной загрузки страницы:
$(document).ready(function() {
// Код здесь запускается после полной загрузки DOM
});
$(window).load(function() {
// Код здесь запускается после полной загрузки страницы и всех её ресурсов
});Для обеспечения кросс-браузерной совместимости используйте addEventListener с поддержкой обходного методa для старых версий браузеров:
function pageLoaded() {
// Здесь ваш код для загрузки
}
if (window.addEventListener) {
window.addEventListener('load', pageLoaded);
} else if (window.attachEvent) {
window.attachEvent('onload', pageLoaded); // Для поддержки в IE
}Продвинутые методы для сложных сценариев загрузки
Если вам необходимо выполнить несколько действий при загрузке страницы, вы можете организовать их в единый обработчик onload:
function firstFunction() { /* ... */ }
function secondFunction() { /* ... */ }
window.addEventListener("load", function() {
firstFunction();
secondFunction();
});Применение статуса "готовности" документа для управления загрузкой
Вы можете оптимизировать процесс загрузки, установив состояние document.readyState:
document.onreadystatechange = function () {
if (document.readyState === "complete") {
// Загрузка страницы завершена, вы можете начать исполнение своего кода
}
};Добавление динамических скриптов
Для скриптов, которые динамически добавляются на страницу (внедряются через JavaScript), убедитесь, что они поддерживают поведение атрибута defer:
var script = document.createElement('script');
script.src = "path-to-your-script.js";
script.async = false; // Скрипт не будет прерывать загрузку страницы
document.head.appendChild(script);Визуализация
Вот наглядная аналогия процесса в нескольких шагах:
🚉 = Веб-страница
🚂 = Движок JavaScript
🛤️ = DOM (Document Object Model)
🚄 = Загрузка страницы
🛤️🔄 = executeAfterPageLoad()Процесс загрузки:
1. 🚄 прибывает на 🚉 (страница завершена)
2. 🚉 объявляет: "Всем на борт!" (Событие DOMContentLoaded срабатывает)
3. 🚂 начинает движение (JavaScript запускается)
4. 🚂 следует по пути 🛤️🔄 (ваша функция executeAfterPageLoad запускается)Только после того как сигнал DOMContentLoaded был подан, executeAfterPageLoad() приступает к работе. Скрипты, которые ожидают загрузки всех ресурсов, начинают работу только после события load.
Полезные материалы
Document: DOMContentLoaded event – Web APIs | MDN — Подробнее о событии DOMContentLoaded.
.ready() | jQuery API Documentation — Описание метода
.ready()в jQuery.Window: load event – Web APIs | MDN — Информация о событии загрузки окна.
Efficiently load JavaScript with defer and async — Дополнительная информация об атрибутах
deferиasync.Page: DOMContentLoaded, load, beforeunload, unload | JavaScript.info — Обсуждение обработки различных событий загрузки в JavaScript.
You Might Not Need jQuery — Как обойтись без jQuery.