Jakie są różnice między metodą JavaScript'a window.onload
i metodą jQuery'a $(document).ready()
?
Zdarzenie ready
występuje po załadowaniu dokumentu HTML, natomiast zdarzenie onload
występuje później, kiedy cała zawartość (np. obrazki) również została załadowana.
Zdarzenie onload
jest standardowym zdarzeniem w DOM, podczas gdy zdarzenie ready
jest specyficzne dla jQuery. Celem zdarzenia ready
jest to, że powinno ono wystąpić jak najwcześniej po załadowaniu dokumentu, tak aby kod dodający funkcjonalność do elementów na stronie nie musiał czekać na załadowanie całej zawartości.
Wbudowanym zdarzeniem JavaScript jest window.onload
, ale jako że jego implementacja miała subtelne dziwactwa w różnych przeglądarkach (Firefox, Internet Explorer 6, Internet Explorer 8, i Opera), jQuery dostarcza document.ready
, który abstrahuje od tego, i odpala się tak szybko, jak tylko strona'DOM jest gotowa (nie czeka na obrazki, itp.).
Funkcja $(document).ready
(zauważ, że nie jest to nie document.ready
, który jest niezdefiniowany) jest funkcją jQuery, opakowującą i zapewniającą konsekwencję dla następujących zdarzeń:
document.ondomcontentready
/ document.ondomcontentloaded
- newish event, który odpala się, gdy dokument's DOM jest załadowany (co może być jakiś czas przed załadowaniem obrazków, etc.); znów, nieco inaczej w Internet Explorerze i w reszcie światawindow.onload
(który jest zaimplementowany nawet w starych przeglądarkach), który odpala się gdy ładuje się cała strona (obrazki, style, etc.)Słowo ostrzeżenia na temat używania $(document).ready()
z Internet Explorerem. Jeśli żądanie HTTP zostanie przerwane przed załadowaniem całego dokumentu (na przykład, podczas gdy strona jest przesyłana do przeglądarki, inny link został kliknięty) IE wywoła zdarzenie $(document).ready
.
Jeśli jakikolwiek kod wewnątrz zdarzenia $(document).ready()
odwołuje się do obiektów DOM, istnieje możliwość, że obiekty te nie zostaną znalezione i mogą wystąpić błędy Javascript. Albo strzeż swoich odniesień do tych obiektów, albo odraczaj kod, który odwołuje się do tych obiektów do zdarzenia window.load.
Nie udało mi się odtworzyć tego problemu w innych przeglądarkach (konkretnie w Chrome i Firefox)