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

Question

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

Answer 1

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

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

Answer 2

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

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

Answer 3

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

DEMO

От Microsoft IE

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

Из Сеть разработчиков Mozilla

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

Answer 4

DOMContentLoaded == window.onDomReady()

Load == window.onLoad()

Страницей нельзя безопасно управлять, пока документ не «готов». JQuery обнаруживает это состояние готовности для вас. Код, включенный в $ (document) .ready (), будет запускаться только после того, как страница объектной модели документа (DOM) будет готова для выполнения кода JavaScript. Код, включенный в $ (window) .load (function () {...}), будет запущен, когда будет готова вся страница (изображения или iframes), а не только DOM.

См .: http://learn.jquery.com/using-jquery-core/document-ready/

Answer 5

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

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

источник