Różnica między zdarzeniami DOMContentLoaded i load

Odpowiedzi:

191

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).

Simon Lieschke
źródło
27
Fyi, ten sam link MDN [teraz] również mówi: „Uwaga: Arkusz stylów ładuje blokowanie wykonywania skryptu, więc jeśli masz <skrypt> po <link rel =" arkusz stylów "...>, strona nie zakończy parsowania - i DOMContentLoaded nie uruchomi się - dopóki arkusz stylów nie zostanie załadowany. ”
Nick
10
@Nick Ta strona podaje powód. html5rocks.com/en/tutorials/internals/howbrowserswork Poleciłbym jednak obejrzenie filmu na stronie.
abhisekp
1
@abhisekp ładny samouczek chociaż linkujące wideo jest już nieaktualne
Supi
Drzewo renderowania jest budowane po uruchomieniu DOMContentLoaded. Ale DOMContentLoaded nie czeka na zakończenie ładowania obrazów / pod-zasobów / ramek podrzędnych zgodnie z developer.mozilla.org/en-US/docs/Web/API/Window/… . Czy wiesz, czy te obrazy / ramy pomocnicze / zasoby podrzędne są wywoływane przez drzewo renderowania po jego zbudowaniu, czy też już przez drzewo DOM podczas tworzenia drzewa renderowania? Innymi słowy, czy drzewo renderowania wyzwala szereg połączeń w celu pobrania tych obrazów / ramek podrzędnych / podrzędnych zasobów, czy też ich pobieranie już trwało?
weefwefwqg3
83

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 .

CMS
źródło
7
Do którego wydarzenia odnosisz się, mówiąc „To wydarzenie”?
Tom Hubbard,
2
„To wydarzenie” = DOMContentLoaded. Nie działa w IE8. Jeśli chcesz to wesprzeć, skorzystaj z obejścia, do którego prowadzi CMS
Jan Derk,
53

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).

Mehrad Sadegh
źródło
Czy DOMContentLoadedgwarantuje, że wszystkie skrypty (łącznie z odroczeniem / asynchronizacją) zostały załadowane? Nic nie mówi się tutaj o skryptach: developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
Sergey
@Sergey Nope. zasoby asynchroniczne - tj. <skrypt async src = app.js /> - są ładowane niezależnie od reszty strony, dlatego DOMContentLoaded może zostać uruchomiony przed pobraniem zasobu z serwera
Mehrad Sadegh
1
@MehradSadegh Myślę, że się mylisz! Z dokumentacji MDN : Skrypty z atrybutem odroczenia zapobiegną uruchamianiu zdarzenia DOMContentLoaded, dopóki skrypt nie zostanie załadowany i nie zakończy oceny. Możesz
rzucić
1
@Jatimir Myślę, że atrybuty odroczenia i asynchronizacji mają różne zachowanie.
Mehrad Sadegh
1
@Jatimir Glad i tak napisałeś, ponieważ twój wkład był dokładnie tym, czego szukałem! Dziękuję Ci!
Robert Wildling,
29

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/

Anderson
źródło
1
Pytanie nie dotyczy jQuery.
user34660,
4
@ user34660 Nie jest, ale pomaga zrozumieć.
Anderson
16
  • 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

skube
źródło
Jeśli mam jakieś znaczniki skryptu z adresem URL do JS, czy ładowałyby się przed domContentLoaded czy po?
Pavan
0

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();
    }
}
YK
źródło