Różnica między zdarzeniami DOMContentLoaded i load

Jaka jest różnica między DOMContentLoadedi loadzdarzenia?

Z Centrum deweloperów Mozilla :

Zdarzenie DOMContentLoaded jest uruchamiane, gdy dokument został całkowicie załadowany i przeanalizowany, bez oczekiwania na zakończenie ładowania arkuszy stylów, obrazów i podramek (zdarzenia ładowania można użyć do wykrycia w pełni załadowanej strony).

DOMContentLoadedWydarzenie będzie ogień tak szybko, jak hierarchia DOM została wykończona, loadwydarzenie zrobi to, gdy wszystkie obrazy i sub-ramki zakończeniu ładowania.

DOMContentLoadedbędzie działać na większości nowoczesnych przeglądarek, ale nie na IE, w tym IE9 i nowszych. Istnieją pewne obejścia, które mogą naśladować to zdarzenie w starszych wersjach IE, takie jak używane w bibliotece jQuery, dołączają określone onreadystatechange wydarzenie IE .

Przekonaj się sam:

PRÓBNY

Z Microsoft IE

Zdarzenie DOMContentLoaded jest uruchamiane po zakończeniu analizowania bieżącej strony; zdarzenie ładowania uruchamia się, gdy wszystkie pliki zostaną załadowane ze wszystkich zasobów, w tym reklam i obrazów. DOMContentLoaded to świetne wydarzenie pozwalające połączyć funkcjonalność interfejsu użytkownika ze złożonymi stronami internetowymi.

Z sieci deweloperów Mozilla

Zdarzenie DOMContentLoaded jest uruchamiane, gdy dokument został całkowicie załadowany i przeanalizowany, bez oczekiwania na zakończenie ładowania arkuszy stylów, obrazów i podramek (zdarzenia ładowania można użyć do wykrycia w pełni załadowanej strony).

DOMContentLoaded==window.onDomReady()

Load==window.onLoad()

Nie można bezpiecznie manipulować stroną, dopóki dokument nie będzie „gotowy”. jQuery wykrywa dla ciebie ten stan gotowości. Kod zawarty w $ (document) .ready () będzie działał tylko wtedy, gdy strona Document Object Model (DOM) będzie gotowa do uruchomienia kodu JavaScript. Kod zawarty w $ (okno) .load (function () {...}) będzie działał, gdy cała strona (obrazy lub iframe), nie tylko DOM, będzie gotowa.

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

• domContentLoaded : oznacza punkt, w którym oba DOM jest gotowy i nie ma arkuszy stylów blokujących wykonywanie JavaScript - co oznacza, że ​​możemy (potencjalnie) zbudować drzewo renderowania. Wiele frameworków JavaScript czeka na to zdarzenie, zanim zacznie wykonywać własną logikę. Z tego powodu przeglądarka przechwytuje znaczniki czasu EventStart i EventEnd, aby umożliwić nam śledzenie czasu wykonania.

• loadEvent : jako ostatni krok przy każdym ładowaniu strony przeglądarka uruchamia zdarzenie „onload”, które może wywołać dodatkową logikę aplikacji.

źródło

Oto kod, który działa dla nas. Okazało się, że MSIE jest trafione i chybione DomContentLoaded, wydaje się, że występuje pewne opóźnienie, gdy żadne dodatkowe zasoby nie są buforowane (do 300 ms w oparciu o rejestrowanie w konsoli), i uruchamia się zbyt szybko, gdy są buforowane. Więc uciekliśmy się do awaryjnego rozwiązania MISE. Chcesz również uruchomić doStuff()funkcję niezależnie od tego, czy DomContentLoadedwyzwala przed, czy po zewnętrznych plikach 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();
    }
}