Html onload event attribute

Пример на YUI 3

YUI 3 разработан вокруг этой самой предпосылки. Вы можете начать с загрузки файла yui.js, а затем использовать встроенный компонент Loader для динамической загрузки остальной части библиотеки YUI. Например:

Этот код сначала загружается в исходный файл YUI, затем создает новый экземпляр объекта и указывает, что компонент «узел» необходим. За кулисами YUI создает URL со всеми зависимостями для «узла», динамически загружает его, а затем вызывает функцию обратного вызова после завершения. Крутая вещь в подходе YUI 3 заключается в том, что вам не нужно беспокоиться о статическом включении URL для JavaScript, просто укажите, какие компоненты вам нужны, и библиотека определит правильный URL для загрузки ( ).

readyState

Jquery click function event клик метод примеры

What happens if we set the handler after the document is loaded?

Naturally, it never runs.

There are cases when we are not sure whether the document is ready or not. We’d like our function to execute when the DOM is loaded, be it now or later.

The property tells us about the current loading state.

There are 3 possible values:

– the document is loading.
– the document was fully read.
– the document was fully read and all resources (like images) are loaded too.

So we can check and setup a handler or execute the code immediately if it’s ready.

Like this:

There’s also event that triggers when the state changes, so we can print all these states like this:

The event is an alternative mechanics of tracking the document loading state, it appeared long ago. Nowadays, it is rarely used.

Let’s see the full events flow for the completeness.

Here’s a document with , and handlers that log events:

The working example is in the sandbox.

The typical output:

initial readyState:loading
readyState:interactive
DOMContentLoaded
iframe onload
img onload
readyState:complete
window onload

The numbers in square brackets denote the approximate time of when it happens. Events labeled with the same digit happen approximately at the same time (± a few ms).

becomes right before . These two things actually mean the same.
becomes when all resources ( and ) are loaded. Here we can see that it happens in about the same time as ( is the last resource) and . Switching to state means the same as . The difference is that always works after all other handlers.

window.onbeforeunload

Html урок 5. создание таблицы в html

If a visitor initiated navigation away from the page or tries to close the window, the handler asks for additional confirmation.

If we cancel the event, the browser may ask the visitor if they are sure.

You can try it by running this code and then reloading the page:

For historical reasons, returning a non-empty string also counts as canceling the event. Some time ago browsers used show it as a message, but as the says, they shouldn’t.

Here’s an example:

The behavior was changed, because some webmasters abused this event handler by showing misleading and annoying messages. So right now old browsers still may show it as a message, but aside of that – there’s no way to customize the message shown to the user.

DOMContentLoaded и скрипты

Html урок 2. оформление ссылок html

Когда браузер загружает HTML и встречает в коде <script> … </ script>, он не может продолжить создание DOM. Он должен выполнить скрипт прямо сейчас. Поэтому DOMContentLoaded может произойти только после выполнения всех скриптов.

Внешние скрипты (подключаемые с помощью src) также приостанавливают создание DOM, пока скрипт загружается и выполняется. Поэтому DOMContentLoaded ожидает выполнения внешних скриптов.

Единственным исключением являются внешние скрипты с атрибутами async и defer. Они указывают браузеру продолжать обработку, не дожидаясь выполнения скриптов. Таким образом, пользователь может увидеть страницу до завершения загрузки скриптов, что хорошо для производительности.

JavaScript

JS Array
concat()
constructor
copyWithin()
entries()
every()
fill()
filter()
find()
findIndex()
forEach()
from()
includes()
indexOf()
isArray()
join()
keys()
length
lastIndexOf()
map()
pop()
prototype
push()
reduce()
reduceRight()
reverse()
shift()
slice()
some()
sort()
splice()
toString()
unshift()
valueOf()

JS Boolean
constructor
prototype
toString()
valueOf()

JS Classes
constructor()
extends
static
super

JS Date
constructor
getDate()
getDay()
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
getTimezoneOffset()
getUTCDate()
getUTCDay()
getUTCFullYear()
getUTCHours()
getUTCMilliseconds()
getUTCMinutes()
getUTCMonth()
getUTCSeconds()
now()
parse()
prototype
setDate()
setFullYear()
setHours()
setMilliseconds()
setMinutes()
setMonth()
setSeconds()
setTime()
setUTCDate()
setUTCFullYear()
setUTCHours()
setUTCMilliseconds()
setUTCMinutes()
setUTCMonth()
setUTCSeconds()
toDateString()
toISOString()
toJSON()
toLocaleDateString()
toLocaleTimeString()
toLocaleString()
toString()
toTimeString()
toUTCString()
UTC()
valueOf()

JS Error
name
message

JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()

JS JSON
parse()
stringify()

JS Math
abs()
acos()
acosh()
asin()
asinh()
atan()
atan2()
atanh()
cbrt()
ceil()
clz32()
cos()
cosh()
E
exp()
expm1()
floor()
fround()
LN2
LN10
log()
log10()
log1p()
log2()
LOG2E
LOG10E
max()
min()
PI
pow()
random()
round()
sign()
sin()
sqrt()
SQRT1_2
SQRT2
tan()
tanh()
trunc()

JS Number
constructor
isFinite()
isInteger()
isNaN()
isSafeInteger()
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
NaN
POSITIVE_INFINITY
prototype
toExponential()
toFixed()
toLocaleString()
toPrecision()
toString()
valueOf()

JS OperatorsJS RegExp
constructor
compile()
exec()
g
global
i
ignoreCase
lastIndex
m
multiline
n+
n*
n?
n{X}
n{X,Y}
n{X,}
n$
^n
?=n
?!n
source
test()
toString()

(x|y)
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx

JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while

JS String
charAt()
charCodeAt()
concat()
constructor
endsWith()
fromCharCode()
includes()
indexOf()
lastIndexOf()
length
localeCompare()
match()
prototype
repeat()
replace()
search()
slice()
split()
startsWith()
substr()
substring()
toLocaleLowerCase()
toLocaleUpperCase()
toLowerCase()
toString()
toUpperCase()
trim()
valueOf()

DOMContentLoaded и стили

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

<link type="text/css" rel="stylesheet" href="style.css">
<script>
  // скрипт не будет выполняться до тех пор, пока не загружены таблицы стиле
  alert(getComputedStyle(document.body).marginTop);
</script>

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

Поскольку DOMContentLoaded ожидает загрузки скриптов (document onload JavaScript), он должен дождаться и загрузки стилей.

More Examples

Example

Using onload on an <img> element. Alert «Image is loaded» immediately after
an image has been loaded:

<img src=»w3html.gif» onload=»loadImage()» width=»100″ height=»132″><script>function loadImage() { alert(«Image is loaded»);}
</script>

Example

Using the onload event to deal with cookies (using «advanced» javascript):

<body onload=»checkCookies()»><p id=»demo»></p><script>
function checkCookies() { var text = «»; if (navigator.cookieEnabled == true) { text = «Cookies are enabled.»; } else { text = «Cookies are not enabled.»; }

document.getElementById(«demo»).innerHTML = text;}</script>

More Examples

Example

Using onload on an <img> element. Alert «Image is loaded» immediately after
an image has been loaded:

<img src=»w3javascript.gif» onload=»loadImage()» width=»100″ height=»132″><script>function loadImage() { alert(«Image is loaded»);}
</script>

Example

Using the onload event to deal with cookies:

<body onload=»checkCookies()»><script>
function checkCookies() { var text = «»; if (navigator.cookieEnabled == true) { text = «Cookies are enabled.»; } else { text = «Cookies are not enabled.»;
} document.getElementById(«demo»).innerHTML = text;}</script>

❮ DOM Events
❮ Event Object

Несколько слов об async и defer

Атрибуты async и defer в window onload JavaScript используются только для внешних скриптов. Они игнорируются, если нет подключения через src.

Оба атрибута указывают браузеру, что он может продолжать обрабатывать страницу и загружать скрипты «в фоновом режиме». А затем запускать скрипт после его полной загрузки. Таким образом, скрипт не блокирует создание DOM и отображение страниц.

Между этими атрибутами есть два отличия.

	async	Defer
Порядок	Скрипты с атрибутом async выполняются в том порядке, в котором они загружаются. Порядок, в котором они указаны в документе, не имеет значения — скрипт, загруженный первым, выполняется первым.	Скрипты с атрибутом defer всегда выполняются в соответствии с порядком, в котором они расположены в документе.
DOMContentLoaded	Скрипты с атрибутом async могут загружаться и выполняться, пока документ еще не загружен полностью. Это происходит, когда скрипты являются небольшими или кэшируются, а документ достаточно объемен.	Скрипты с атрибутом defer выполняются после того, как документ будет полностью загружен и обработан (если необходимо они ожидают завершения процесса), сразу после события DOMContentLoaded.

Атрибут async используется для полностью независимых скриптов.

5 ответов

Лучший ответ

Если вы напрямую запускаете код с , вы откладываете рендеринг вашего браузера на время, необходимое для выполнения кода JavaScript.

Вы можете попробовать вставить свой код в вашего HTML-документа:

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

Теперь, если вы измените код, который будет выполняться для тела , страница будет обработана до , появится предупреждение:

jehna1
11 Мар 2016 в 22:59

Ожидание события onload гарантирует, что все ваши скрипты и ресурсы загружены

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

Hassan Khallouf
11 Мар 2016 в 22:54

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

Предполагая, что ваша страница содержит элемент с идентификатором , он сообщит свой текст.

rrowland
11 Мар 2016 в 22:53

Рассмотрим эти два блока кода:

В первом примере мы получим ошибку, потому что элемент, на который вы ссылаетесь, не найден при запуске скрипта — и поэтому вы пытаетесь получить из .

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

baao
11 Мар 2016 в 22:56

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

Я рекомендую использовать jQuery и использовать функцию ready. Таким образом, вы убедитесь, что ваша страница полностью загружена.

Если вы не хотите загружать запрос, просто поместите свой JavaScript внизу страницы. Это лучшая практика, обеспечивающая полную загрузку DOM.

Maximus
11 Мар 2016 в 22:58

JavaScript

JS Boolean
constructor
prototype
toString()
valueOf()

JS Classes
constructor()
extends
static
super

JS Error
name
message

JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()

JS JSON
parse()
stringify()

JS OperatorsJS RegExp
constructor
compile()
exec()
g
global
i
ignoreCase
lastIndex
m
multiline
n+
n*
n?
n{X}
n{X,Y}
n{X,}
n$
^n
?=n
?!n
source
test()
toString()

(x|y)
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx

JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while

HTML Tags

<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>

readyState

В заключение
занятия отметим свойство

document.readyState

которое в момент
загрузки HTML-документа принимает
следующие значения:

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

В ряде случаев
это свойство бывает весьма полезно. Например, мы вызываем функцию, но не
уверены, что DOM-дерево
полностью построено. Поэтому, делаем такую проверку:

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

которое
дополняет работу с этими событиями.

Видео по теме

JavaScipt (DOM) #1: объектная модель документа DOM и BOM

JavaScipt (DOM) #2: навигация по DOM — parentNode, nextSibling, previousSibling, chidNodes

JavaScipt (DOM) #3: методы поиска элементов в DOM: querySelector, querySelectorAll, getElementById

JavaScipt (DOM) #4: свойства DOM-узлов: nodeName, innerHTML, outerHTML, data, textContent, hidden

JavaScipt (DOM) #5: работа с нестандартными свойствами DOM-элементов: getAttribute, setAttribute, dataset

JavaScipt (DOM) #6: создание и добавление элементов DOM createElement, append, remove, insertAdjacentHTML

JavaScipt (DOM) #7: управление стилями — className, style, classList, getComputedStyle

JavaScipt (DOM) #8: метрики — clientWidth, scrollTop, scrollHeight, offsetLeft, offsetTop, clientLeft

JavaScipt (DOM) #9: HTML-документ: размеры (clientWidth, innerWidth), положение (pageYOffset, scrollBy)

JavaScipt (DOM) #10: расположение элементов — fixed, absolute, getBoundingClientRect, elementFromPoint

JavaScipt (DOM) #11: обработчики событий: onclick, addEventListener, removeEventListener, event

JavaScipt (DOM) #12: погружение и всплытие событий: stopPropagation, stopImmediatePropagation, eventPhase

JavaScipt (DOM) #13: делегирование событий, отмена действия браузера по умолчанию — preventDefault

JavaScipt (DOM) #14: события мыши mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter

JavaScipt (DOM) #15: события клавиатуры keydown, keyup, событие скроллинга scroll

JavaScipt (DOM) #16: навигация и обработка элементов форм (form) — document.forms, form.elements

JavaScipt (DOM) #17: фокусировка — focus, blur, focusin, focusout, tabindex, activeElement

JavaScipt (DOM) #18: события change, input, cut, copy, paste, submit элементов input и select

JavaScipt (DOM) #19: события при загрузке — DOMContentLoaded, load, unload, beforeunload, readyState

JavaScipt (DOM) #20: события load, error; атрибуты async, defer тега script

JavaScipt (DOM) #21: пример предзагрузки изображений с помощью javascript

JavaScipt (DOM) #22: пример создания начала игры арканоид

More Examples

Example

Using onload on an <img> element. Alert «Image is loaded» immediately after
an image has been loaded:

<img src=»w3javascript.gif» onload=»loadImage()» width=»100″ height=»132″><script>function loadImage() { alert(«Image is loaded»);}
</script>

Example

Using the onload event to deal with cookies:

❮ DOM Events
❮ Event Object

9 ответов

Лучший ответ

Большинство предлагаемых «решений» являются специфичными для Microsoft или требуют раздутых библиотек. Вот один хороший способ. Это работает с W3C-совместимыми браузерами и с Microsoft IE.

user83421
27 Мар 2009 в 01:34

Mootools — еще одна замечательная среда JavaScript, которая довольно проста в использовании и, как сказал RedWolves с jQuery вы можете просто продолжать отбрасывать столько обработчиков, сколько захотите.

Для каждого файла * .js, который я включаю, я просто заключаю код в функцию.

И есть также преимущества использования domready вместо onload

cole
13 Авг 2008 в 04:16

На самом деле, согласно этой странице MSDN, похоже, что вы может вызывать эту функцию несколько раз, чтобы зарегистрировать несколько сценариев. Вам просто нужно использовать разные ключи (второй аргумент).

Я считаю, что должно работать.

Derek Park
13 Авг 2008 в 03:39

Рассматривали ли вы возможность использовать что-то вроде JQuery, которое обеспечивает основу для очистки добавления нескольких обработчиков событий?

Jeff Atwood
13 Авг 2008 в 03:30

Я не знаю много о ASP.NET, но почему бы не написать пользовательскую функцию для события onload, которая в свою очередь вызывает обе функции для вас? Если у вас есть две функции, вызовите их обе из третьего скрипта, который вы регистрируете для события.

Derek Park
13 Авг 2008 в 03:26

Попробуй это:

Редактировать: эй, я только собирался войти в Firefox и переформатировать это сам! Похоже, до сих пор не отформатировать код для меня с IE7.

Chris Farmer
13 Авг 2008 в 03:33

Вы можете сделать это с помощью jquery

Alexander Elgin
11 Фев 2016 в 03:24

У меня была похожая проблема сегодня, поэтому я решил ее с следующим образом:

И в дополнительных файлах js, которые я хочу прикрепить к событию onload, я просто должен сделать это:

Я обычно использую jQuery, но на этот раз я ограничился только js, которые какое-то время заставляли меня думать!

Alexander Elgin
11 Фев 2016 в 03:27

По-прежнему существует уродливое решение (которое намного хуже, чем использование каркаса или / ), которое заключается в сохранении текущего события :

Обратите внимание, что фреймворки, такие как jQuery, обеспечат способ выполнения кода, когда DOM готов, а не при загрузке страницы. Готовность DOM означает, что ваш HTML загружен, но не внешние компоненты, такие как изображения или таблицы стилей, что позволяет вам вызываться задолго до того, как сработает событие load

Готовность DOM означает, что ваш HTML загружен, но не внешние компоненты, такие как изображения или таблицы стилей, что позволяет вам вызываться задолго до того, как сработает событие load.

Alexander Elgin
11 Фев 2016 в 03:26

readyState

Что произойдет, если установить обработчик DOMContentLoaded после загрузки документа? Естественно, он никогда не запустится.

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

Свойство document.readyState предоставляет такую информацию. Возможны три значения:

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

Так можно проверить значение document.readyState и настроить обработчик или выполнить код немедленно, как только он будет готов.

Например, следующим образом:

function work() { /*...*/ }
if (document.readyState == 'loading') {
  document.addEventListener('DOMContentLoaded', work);
} else {
  work();
}

Событие readystatechange запускается при изменении состояния. Можно выводить все эти состояния следующим образом:

// текущее состояние
console.log(document.readyState);

// выводим изменение состояния
document.addEventListener('readystatechange', () => console.log(document.readyState));

Событие readystatechange является альтернативным методом отслеживания состояния загрузки документа, оно было введено давно. В настоящее время оно редко используется, но рассмотрим его для полноты картины.

Как размещается readystatechange по отношению к другим событиям? Чтобы продемонстрировать порядок их срабатывания, ниже приводится пример с <iframe>, <img> и обработчиками, которые регистрируют события (JavaScript onload и другие):

<script>
  function log(text) { /* выводим время и сообщение */ }
  log('initial readyState:' + document.readyState);

  document.addEventListener('readystatechange', () => log('readyState:' + document.readyState));
  document.addEventListener('DOMContentLoaded', () => log('DOMContentLoaded'));

  window.onload = () => log('window onload');
</script>

<iframe src="iframe.html" onload="log('iframe onload')"></iframe>

<img src="http://en.js.cx/clipart/train.gif" id="img">
<script>
  img.onload = () => log('img onload');
</script>

Демо-версию можно найти на sandbox.

Стандартная последовательность событий:

инициализация readyState:loading;
readyState:interactive;
DOMContentLoaded;
iframe onload;
readyState:complete;
img onload;
window onload JavaScript.

Цифры в квадратных скобках обозначают приблизительное время, когда это происходит. Реальное время немного больше, но события с одинаковой цифрой срабатывают примерно в одно и то же время (± несколько миллисекунд).

Document.readyState принимает состояние interactive непосредственно перед DOMContentLoaded. Эти два события фактически означают одно и то же.

Document.readyState завершается, когда загружаются все ресурсы (iframe и img). Мы видим, что это происходит примерно в то же время, что и img.onload (img — последний ресурс) и window.onload. Переключение на состояние complete означает то же, что и window.onload. Разница в том, что window.onload всегда запускается после всех других обработчиков load.

HTML Reference

HTML by AlphabetHTML by CategoryHTML Browser SupportHTML AttributesHTML Global AttributesHTML EventsHTML ColorsHTML CanvasHTML Audio/VideoHTML Character SetsHTML DoctypesHTML URL EncodeHTML Language CodesHTML Country CodesHTTP MessagesHTTP MethodsPX to EM ConverterKeyboard Shortcuts

Больше Примеров

Пример

С помощью события onload элемент <img>. Предупреждение «Изображение загружено» сразу после загрузки изображения:

<img src=»w3html.gif» onload=»loadImage()» width=»100″ height=»132″>
<script>
function loadImage() {
alert(«Изображение загружено»);}
</script>

Пример

Использование события onload для работы с файлами cookie (с помощью javascript «advanced»):

<body onload=»checkCookies()»>
<p id=»demo»></p>
<script>
function checkCookies() {
    var text = «»;
    if (navigator.cookieEnabled == true) {
        text = «Cookies включены.»;
    } else {
        text = «Файлы cookie не включены.»;
    }
    document.getElementById(«demo»).innerHTML = text;}
</script>

Summary

Page load events:

event triggers on when DOM is ready. We can apply JavaScript to elements at this stage.
- Script such as or block DOMContentLoaded, the browser waits for them to execute.
- Images and other resources may also still continue loading.
event on triggers when the page and all resources are loaded. We rarely use it, because there’s usually no need to wait for so long.
event on triggers when the user wants to leave the page. If we cancel the event, browser asks whether the user really wants to leave (e.g we have unsaved changes).
event on triggers when the user is finally leaving, in the handler we can only do simple things that do not involve delays or asking a user. Because of that limitation, it’s rarely used. We can send out a network request with .
is the current state of the document, changes can be tracked in the event:
- – the document is loading.
- – the document is parsed, happens at about the same time as , but before it.
- – the document and resources are loaded, happens at about the same time as , but before it.

DOMContentLoaded

Событие DOMContentLoaded происходит в объекте документа. Необходимо использовать addEventListener, чтобы отследить его:

document.addEventListener("DOMContentLoaded", ready);

Например:

<script>
  function ready() {
    alert('DOM is ready');

    // изображения еще не загрузились (если только не были сохранены в кэше), поэтому их размер 0x0
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  }

  document.addEventListener("DOMContentLoaded", ready);
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

В этом примере обработчик DOMContentLoaded запускается при загрузке документа (не при JavaScript onload), и не ждет полной загрузки страницы. Таким образом, предупреждение сообщает, что размер изображений равен нулю.

На первый взгляд событие DOMContentLoaded простое. Но есть несколько особенностей.