Событие onload

События при загрузке HTML-документа

И добавим обработчик для DOMContentLoaded. Это можно сделать только через метод addEventListener объекта document:

document.addEventListener("DOMContentLoaded", ready); function ready(event) { console.log("DOMContentLoaded"); console.log(`Изображение: ${image.offsetWidth}x${image.offsetHeight}`); }

В обработчике мы выводим размер изображения. Обновляем документ и видим, что размер нулевой. Это как раз и говорит о том, что событие DOMContentLoaded возникает до загрузки ресурсов (если, конечно, они не были закэшированы). В целом, все понятно и просто. Но, как всегда, есть один нюанс. Данное событие отрабатывает только после выполнения всех скриптов, записанных в HTML-документе. Например, если мы добавим вот такой скрипт в конец документа:

script> console.log("вызов метода write"); document.write('Добавляем тег p на страницу'); script>

• Скрипты с атрибутом async (который мы рассмотрим немного позже), не блокируют DOMContentLoaded.
• Скрипты, сгенерированные динамически при помощи document.createElement(‘script’) и затем добавленные на страницу, также не блокируют это событие.

script> // скрипт не выполняется, пока не загрузятся стили console.log(getComputedStyle(document.body).marginTop); script>

То браузер будет вынужден сгенерировать событие DOMContentLoaded после загрузки стилей. Вот эти нюансы следует иметь в виду при работе с этим событием. Следующее событие load для объекта window работает очень просто: оно генерируется браузером, когда HTML-документ полностью загружен вместе со всеми связанными с ним ресурсами:

window.onload = function(event) { console.log("load"); console.log(`Изображение: ${image.offsetWidth}x${image.offsetHeight}`); }

Здесь при обновлении документа мы увидим полные размеры изображения. Следующее событие unload объекта window выполняется когда пользователь практически покинул HTML-страницу. Обычно, в этот момент отправляется статистика поведения пользователя на странице серверу:

window.addEventListener("unload", function() { console.log("отправка данных на сервер"); });

Если мы теперь станем обновлять станицу, то в консоли будет появляться данное сообщение. К сожалению, продемонстрировать работу этого события как то приятнее не получается. Поэтому, далее, пара слов теории. Для отправки данных серверу в объекте navigator существует такой специальный метод: navigator.sendBeacon(url, data); Здесь url – это путь к скрипту на сервере, который будет принимать данные data. Особенность этого метода в том, что при закрытии страницы нет необходимости дожидаться окончания его работы. Браузер будет его выполнять в фоне даже при отсутствии ранее открытого документа. Поэтому, если вы хотите что-то отправить на сервер при закрытии HTML-страницы, то это лучше всего делать через этот метод. На практике он реализуется примерно так:

window.addEventListener("unload", function() { navigator.sendBeacon("/analytics.php", JSON.stringify(myData)); };

window.onbeforeunload = function() { return false; };

Теперь, при обновлении документа будет появляться окно, спрашивающее пользователя: действительно ли он хочет перезагрузить страницу. Это должно привлечь его внимание и напомнить о возможных последствиях такого действия, например, на несохранение каких-то данных. Ранее, в браузерах можно было писать свои сообщения в таких окнах, примерно так:

window.onbeforeunload = function() { return "Не уходи не попрощавшись!"; };

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

readyState

• «loading» – документ в процессе загрузки;
• «interactive» – документ был полностью прочитан (парсинг документа завершен);
• «complete» – документ был полностью прочитан и все ресурсы (изображения, стили и т.п.) тоже загружены.

removeImage(); function removeImage() { if(document.readyState == "loading") { console.log("документ грузится, вешаем обработчик"); document.addEventListener("DOMContentLoaded", removeImage); } else { console.log("удаляем изображение"); document.body.remove(image); } }

По аналогии могут быть обработаны и остальные свойства. Для полноты картины пару слов о событии readystatechange, которое появилось до событий DOMContentLoaded, load, unload, beforeunload и в старых версиях JavaScript процесс загрузки документа контролировался через него. Например, так:

document.addEventListener('readystatechange', function() { console.log(document.readyState); });

Теперь при обновлении страницы мы можем увидеть изменение состояний свойства document.readyState в процессе загрузки. Однако такой механизм отслеживания ушел в прошлое и сейчас уже нет смысла о нем подробно говорить. Итак, на этом занятии мы с вами рассмотрели события DOMContentLoaded, load, unload, beforeunload и поговорили о свойстве document.readyState которое дополняет работу с этими событиями.

Источник

Событие onload

Событие onload используется как указатель, что веб-страница полностью загружена, включая содержание, изображения, стилевые файлы и внешние скрипты.

Синтаксис

Значения

Значение по умолчанию

Применяется к тегам

Пример

     @keyframes _transparent < from < opacity: 0; >to < opacity: 1;>> @-webkit-keyframes _transparent < from < opacity: 0; >to < opacity: 1;>> @-moz-keyframes _transparent < from < opacity: 0; >to < opacity: 1;>> #status function loadPage()  
 

В данном примере после загрузки страницы будет выведено сообщение «Страница загружена».

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Типы тегов

HTML5

Блочные элементы

Строчные элементы

Универсальные элементы

Нестандартные теги

Осуждаемые теги

Видео

Документ

Звук

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Форматирование

Формы

Фреймы

Источник

Window: load event

The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets, scripts, iframes, and images. This is in contrast to DOMContentLoaded , which is fired as soon as the page DOM has been loaded, without waiting for resources to finish loading.

This event is not cancelable and does not bubble.

Note: All events named load will not propagate to Window , even with bubbles initialized to true . To catch load events on the window , that load event must be dispatched directly to the window .

Note: The load event that is dispatched when the main document has loaded is dispatched on the window , but has two mutated properties: target is document , and path is undefined . These two properties are mutated due to legacy conformance.

Syntax

Use the event name in methods like addEventListener() , or set an event handler property.

addEventListener("load", (event) => >); onload = (event) => >; 

Event type

Examples

Log a message when the page is fully loaded:

.addEventListener("load", (event) =>  console.log("page is fully loaded"); >); 

The same, but using the onload event handler property:

.onload = (event) =>  console.log("page is fully loaded"); >; 

Live example

HTML

div class="controls"> button id="reload" type="button">Reloadbutton> div> div class="event-log"> label for="eventLog">Event log:label> textarea readonly class="event-log-contents" rows="8" cols="30" id="eventLog">textarea> div> 

body  display: grid; grid-template-areas: "control log"; > .controls  grid-area: control; display: flex; align-items: center; justify-content: center; > .event-log  grid-area: log; > .event-log-contents  resize: none; > label, button  display: block; > #reload  height: 2rem; > 

JavaScript

const log = document.querySelector(".event-log-contents"); const reload = document.querySelector("#reload"); reload.addEventListener("click", () =>  log.textContent = ""; setTimeout(() =>  window.location.reload(true); >, 200); >); window.addEventListener("load", (event) =>  log.textContent += "load\n"; >); document.addEventListener("readystatechange", (event) =>  log.textContent += `readystate: $document.readyState>\n`; >); document.addEventListener("DOMContentLoaded", (event) =>  log.textContent += `DOMContentLoaded\n`; >); 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Apr 8, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник