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

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

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

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

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

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

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

DEMO

От Microsoft IE

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

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

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

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/

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

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

источник

Вот код, который работает для нас. Мы обнаружили, что MSIE ударил и пропустил DomContentLoaded, кажется, что есть некоторая задержка, когда никакие дополнительные ресурсы не кэшируются (до 300 мс, основываясь на нашем журнале консоли), и он срабатывает слишком быстро, когда они кэшируются. Таким образом, мы прибегли к отступлению для MISE. Вы также хотите активировать doStuff()функцию независимо от того, DomContentLoadedзапускается ли она до или после ваших внешних файлов JS.

// detect MSIE 9,10,11, but not Edge
ua=navigator.userAgent.toLowerCase();isIE=/msie/.test(ua);

function doStuff(){
    //
}
if(isIE){
    // play it safe, very few users, exec ur JS when all resources are loaded
    window.onload=function(){doStuff();}
} else {
    // add event listener to trigger your function when DOMContentLoaded
    if(document.readyState==='loading'){
        document.addEventListener('DOMContentLoaded',doStuff);
    } else {
        // DOMContentLoaded already loaded, so better trigger your function
        doStuff();
    }
}