jQuery - Rożnica między $(document).ready a $(window).load

Istotnym aspektem działania wielu skryptów, jest odpowiedni moment ich wykonania. W jQuery mamy do dyspozycji dwa eventy: $(document).ready oraz $(window).load. Ten artykulik chciałbym poświęcić na przedstawienie zasadniczej różnicy między tymi zdarzeniami. Jej znajomość bardzo często może zaoszczędzić wiele czasu i nerwów.

Kiedy odpalane jest zdarzenie $(document).ready?

Zdarzenie $(document).ready wywoływane jest w momencie wczytania całego dokumentu HTML oraz po przygotowaniu wszystkich obiektów DOM. Przygotowaniu jednak, nie oznacza ich załadowania, czyli będzie już "wiadomo", że na stronie, w tym i w tym miejscu znajdzie element taki jak grafika czy ramka, jednak ich zawartość jeszcze nie została pobrana/wczytana i wyświetlona.

Jak się sprawy mają ze zdarzeniem $(window).load?

Zdarzenie $(window).load odpalone zostanie po przygotowaniu obiektów DOM oraz po ich pełnym wczytaniu! To znaczy, że elementy takie jak grafika, ramki etc. będą miały już załadowaną swoją zawartość i zostaną wyświetlone użytkownikowi. Jest to zasadnicza różnica między zdarzeniami $(document).ready a $(window).load i warto mieć tego świadomość.

Podsumujmy zatem...

Jak widać zdarzenie $(window).load jest odpalane później niż $(document).ready i jeśli nasz skrypt ma operować na elementach takich jak grafika itp. to warto skorzystać właśnie z niego, czyli w momencie w którym de facto ta grafika się pojawi. Analogicznie event $(document).ready jest wywoływany wcześniej niż $(window).load i należy go stosować np. w sytuacji, w której nie chcemy dopuścić do wyświetlenia danego elementu, np. zdjęcia. Gdybyśmy zrobili to po zdarzeniu $(window).load grafika, którą chcemy usunąć ze strony została by w pełni wczytana, na moment wyświetlona użytkownikowi a następnie na jego oczach usunięta ze strony.

Widać więc, że należy świadomie podchodzić do wyboru zdarzeń, po których chcemy wywołać nasz skrypt, aby uniknąć niepożądanych efektów.