Процесс загрузки HTML-документа, условно, состоит из трёх стадий:

• DOMContentLoaded – браузер полностью загрузил HTML, и построил DOM-дерево.
• load – браузер загрузил все ресурсы.
• beforeunload/unload – уход со страницы.

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

• DOMContentLoaded – означает, что все DOM-элементы разметки уже созданы, можно их искать, вешать обработчики, создавать интерфейс, но при этом, возможно, ещё не догрузились какие-то картинки или стили.
• load – страница и все ресурсы загружены, используется редко, обычно нет нужды ждать этого момента.
• beforeunload/unload – можно проверить, сохранил ли посетитель изменения, уточнить, действительно ли он хочет покинуть страницу.

Далее мы рассмотрим важные детали этих событий.

Событие DOMContentLoaded происходит на document и поддерживается во всех браузерах, кроме IE8-. Про поддержку аналогичного функционала в старых IE мы поговорим в конце главы.

Обработчик на него вешается только через addEventListener:

document.addEventListener("DOMContentLoaded", ready);

Пример:

function ready { alert( 'DOM готов' ); alert( "Размеры картинки: " + img.offsetWidth + "x" + img.offsetHeight ); } document.addEventListener("DOMContentLoaded", ready);

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

Поэтому на момент вывода alert и сама картинка будет невидна и её размеры – неизвестны (кроме случая, когда картинка взята из кеша браузера).

В своей сути, событие onDOMContentLoaded – простое, как пробка. Полностью создано DOM-дерево – и вот событие. Но с ним связан ряд существенных тонкостей.

Если в документе есть теги , то браузер обязан их выполнить до того, как построит DOM. Поэтому событие DOMContentLoaded ждёт загрузки и выполнения таких скриптов.

Source: learn.javascript.ru