Получить профессию в Skypro
Запуск функции при загрузке страницы без тега <body>
Пройдите тест, узнайте какой профессии подходите
Быстрый ответ
Для того, чтобы функция начала выполняться непосредственно после полной загрузки HTML-документа, подключите событие DOMContentLoaded. Совместите его с анонимной функцией внутри обработчика, и она будет выполнена, как только загрузится структура DOM:
document.addEventListener('DOMContentLoaded', function() {
alert('DOM успешно загружен и готов к действию');
});Если зависимость вашего кода связана с загрузкой всех ресурсов, например, изображений или стилей, используйте window.onload:
window.onload = function() {
alert('Все ресурсы были успешно загружены!');
};Обязательно определите сами функции перед началом присвоения их обработчикам событий window.onload и `DOMContentLoaded. Чтобы облегчить чтение кода, рекомендуется размещать функции во внешних файлах JavaScript.
Обработка загрузки: Расширенные приёмы
1. Заблаговременная подготовка
Подготовьте необходимые функции при помощи JavaScript-файла:
function codeAddress() {
// Ваш код здесь
}Теперь вы можете привязать их к событию window.onload до того как началась загрузка:
window.onload = codeAddress;2. Тайная мощь jQuery
При работе с jQuery применяйте метод $(document).ready(), который не требует наличия тега <body>:
$(document).ready(function() {
// Ваш код здесь
});3. Множество обработчиков события onload
Если вам нужно обработать несколько событий onload, чтобы избегать возникновения конфликтов, используйте addEventListener или attachEvent (для Internet Explorer):
function otherFunction() {
// Ваш код здесь
}
window.addEventListener('load', codeAddress); // Первая функция
window.addEventListener('load', otherFunction); // Вторая функция4. Анонимная функция: не требует наименования
Для того, чтобы код начал выполняться сразу, используйте анонимную функцию:
(function() {
// Ваш код здесь
})();Визуализация
Веб-страница по своей сути – это подобно сцена, готовая к началу спектакля.
Функция выходит на "сцену" и начинает "выступать", когда страница полностью загружается:
window.onload = function() {
performAct(); // Спектакль начинается
};Таким образом, функция начинает действовать, когда страница полностью загружена:
Страница загружена: занавес открыт.
Функция в дело пошла: всемирный театр уже в действии.Углубляемся в тему: Практические советы
1. Разделяйте код и HTML
Следует избегать применения встроенных обработчиков событий, таких как <body onload="functionName();">, поскольку правильным подходом является разделение HTML и JavaScript.
2. Отложенная загрузка скрипта
Хотите разместить скрипты в <head>, однако они должны быть выполнены после загрузки страницы? Используйте атрибут defer:
<script src="yourscript.js" defer></script>3. Последовательность обработчиков событий
Если установлено несколько обработчиков window.onload, они будут выполняться в той последовательности, в которую были добавлены.
4. Поддержка различных браузеров
Выберите между window.addEventListener и window.attachEvent, исходя из тех браузеров, которые используют ваши пользователи. Учтите, что addEventListener – это современный, и поэтому предпочтительный метод, в то время как attachEvent используется в старых версиях Internet Explorer.
Полезные ресурсы
- Window: load event – Web APIs | MDN — Детальное описание механизма событий загрузки окна.
- Document: DOMContentLoaded event – Web APIs | MDN — Информация о событии
DOMContentLoaded. - $( document ).ready() | jQuery Learning Center — Как используется метод jQuery для выполнения кода после загрузки документа.
- Efficiently load JavaScript with defer and async — Обзор применения атрибутов
asyncиdeferв скриптах. - The Modern JavaScript Tutorial — Полезный справочник по JavaScript.
- javascript – Event binding on dynamically created elements? – Stack Overflow — Обсуждение на Stack Overflow о привязке событий к динамически создаваемым элементам.
- Events – You Don't Need jQuery! – Free yourself from the chains of jQuery by embracing and understanding the modern Web API — Как работать с событиями напрямую через Web API, не прибегая к использованию jQuery.