В чем разница между событиями DOMContentLoaded и загрузкой?
В Центр разработчиков Mozilla:
Событие DOMContentLoaded запускается, когда документ был полностью загружен и проанализирован, не дожидаясь таблиц стилей, изображений, и подкадры для завершения загрузки (событие загрузки может использоваться для обнаружения полностью загруженная страница).
Событие DOMContentLoaded будет срабатывать, как только иерархия DOM будет полностью построена, событие load сделает это, когда все изображения и подкадры закончат загрузку.
Это событие будет работать на большинстве современных браузеров, , но не на IE, включая IE9 и выше. Есть несколько обходных решений, чтобы имитировать это событие в более старых версиях IE, например, используемых в библиотеке jQuery, они прикрепляют IE onreadystatechange.
Посмотрите на разницу:
Из Microsoft IE
Событие DOMContentLoaded срабатывает при завершении синтаксического анализа текущей страницы; событие загрузки запускается, когда все файлы завершают загрузку со всех ресурсов, включая рекламу и изображения. DOMContentLoaded - отличное событие для использования функций пользовательского интерфейса для сложных веб-страниц.
Событие DOMContentLoaded запускается, когда документ полностью загружен и проанализирован, не дожидаясь завершения стилей, изображений и подкадров, чтобы завершить загрузку (событие загрузки может использоваться для обнаружения полностью загруженной страницы).
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/
domContentLoaded: указывает точку, когда и DOM готов, и нет стилей, которые блокируют выполнение JavaScript - что мы можем (потенциально) построить дерево рендеринга. Многие Структуры JavaScript ждут этого события, прежде чем они начнут выполнять свою собственную логику. По этой причине браузер захватывает временные метки EventStart и EventEnd, чтобы мы могли отслеживать, как долго это выполнение взял.
loadEvent: как последний шаг в каждой загрузке страницы обозревателя событие "onload", которое может инициировать дополнительную логику приложения.