Різниця між подіями DOMContentLoaded та завантаженням

У чому різниця між подіями DOMContentLoadedі loadподіями?

Від центру розробників Mozilla :

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

DOMContentLoadedПодія буде спрацьовувати , як тільки ієрархія DOM була повністю побудована, то loadподія буде робити це , коли все зображення і підкадрів закінчили навантаження.

DOMContentLoadedпрацюватиме на більшості сучасних браузерів, але не на IE, включаючи IE9 і вище. Існують деякі шляхи вирішення цієї події на старих версіях IE, як, наприклад, у бібліотеці jQuery, вони прикріплюють конкретну onreadystatechange подію IE .

Переконайтесь самі в різниці:

DEMO

Від Microsoft IE

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

Від мережі розробників Mozilla

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

DOMContentLoaded==window.onDomReady()

Load==window.onLoad()

Не можна безпечно маніпулювати сторінкою, поки документ не буде готовий. jQuery виявляє цей стан готовності для вас. Код, включений у $ (document) .ready (), запуститься лише після того, як сторінка Модель об'єкта документа (DOM) буде готова для виконання коду JavaScript. Код, включений у $ (window) .load (function () {...}), запуститься, коли буде готова вся сторінка (зображення чи рамки), а не лише 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();
    }
}