Разница между событиями DOMContentLoaded и загрузкой

В чем разница между событиями DOMContentLoaded и загрузкой?

ОТВЕТЫ

Ответ 1

В Центр разработчиков Mozilla:

Событие DOMContentLoaded запускается, когда документ был полностью загружен и проанализирован, не дожидаясь таблиц стилей, изображений, и подкадры для завершения загрузки (событие загрузки может использоваться для обнаружения полностью загруженная страница).

Ответ 2

Событие DOMContentLoaded будет срабатывать, как только иерархия DOM будет полностью построена, событие load сделает это, когда все изображения и подкадры закончат загрузку.

Это событие будет работать на большинстве современных браузеров, , но не на IE, включая IE9 и выше. Есть несколько обходных решений, чтобы имитировать это событие в более старых версиях IE, например, используемых в библиотеке jQuery, они прикрепляют IE onreadystatechange.

Ответ 3

Посмотрите на разницу:

DEMO

Из Microsoft IE

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

Из Mozilla Developer Network

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

Ответ 4

DOMContentLoaded == window.onDomReady()

Load == window.onLoad()

Нельзя безопасно манипулировать страницей, пока документ не будет готов. jQuery определяет это состояние готовности для вас. Код, включенный внутри $(document).ready() будет запускаться только после того, как страница Document Object Model (DOM) готова для выполнения кода JavaScript. Код, включенный внутри $(window).load(function() {...}) будет запускаться после того, как будет готова вся страница (изображения или фреймы), а не только DOM.

Смотрите: http://learn.jquery.com/using-jquery-core/document-ready/

Ответ 5

  • domContentLoaded: указывает точку, когда и DOM готов, и нет стилей, которые блокируют выполнение JavaScript - что мы можем (потенциально) построить дерево рендеринга. Многие Структуры JavaScript ждут этого события, прежде чем они начнут выполнять свою собственную логику. По этой причине браузер захватывает временные метки EventStart и EventEnd, чтобы мы могли отслеживать, как долго это выполнение взял.

  • loadEvent: как последний шаг в каждой загрузке страницы обозревателя событие "onload", которое может инициировать дополнительную логику приложения.

источник