JavaScript: Zdarzenie DOMContentLoaded i load

0:00Zdarzeń, które wywołuje przeglądarka jest bardzo wiele i część z nich to mogą być

0:04takie na akcje użytkownika właśnie jak kliknięcie w jakiś przycisk, a część są to

0:08takie zdarzenia można powiedzieć UI, czyli np.

0:12jak strona się wczyta to jest wywoływane zdarzenie load, a kiedy wczyta się drzewo

0:16DOM jest wywoływane zdarzenie DOMContentLoaded i o tych dwóch powiemy sobie teraz.

0:21Teraz o co chodzi?

0:22Zobacz, mamy tutaj jakiś obrazek na stronie, który się wczytuje z zewnętrznego

0:26serwera i mamy tutaj skrypt podłączony poniżej.

0:29Więc na etapie tego skryptu możemy się

0:31odwołać do tego obrazka i chciałbym odczytać jego szerokość.

0:35Więc pobrałem sobie go tutaj do stałej i

0:37zrobimy sobie console.log i w takim Template Stringu

0:40wymiary obrazka to

0:44i tutaj sobie zinterpolujemy img.offsetWidth i dodamy sobie piksele

0:50albo zrobimy tutaj taki x i następnie zrobimy img.offsetHeight

0:57i tutaj dopiszemy px.

0:59Czyli po prostu jak się wczyta ten skrypt chcę wyświetlić wymiary obrazka.

1:02No i zobaczmy.

1:04Jak widzisz tutaj to wszystko działa poprawnie.

1:05Przejdźmy sobie jeszcze do panelu Network.

1:07Zaznaczymy Disable cache,

1:08to oznacza, że za każdym odświeżeniem

1:10chcemy od nowa pobierać wszystkie zasoby na stronie.

1:14I zauważ wydaje się, że tutaj wszystko jest ok.

1:17Czyli trudno jest mi pokazać, że występuje tutaj pewien problem,

1:22dlatego przejdźmy może do panelu Network i przejdziemy sobie tutaj do tego online i

1:27wybierzemy Slow 3G, czyli chcemy spowolnić nasze połączenie.

1:31Zobaczmy, teraz jak się strona odświeży,

1:34ten obrazek będzie dłużej pobierany

1:38i zauważ co tutaj się wydarzyło.

1:40Wymiary obrazka to 0 na 0.

1:42Jaki tutaj jest problem?

1:44Otóż ta strona kiedy się wczytuje przeglądarka dochodzi do tego obrazka

1:48to ona nie blokuje wczytywania dalszej

1:49strony tylko asynchronicznie pobiera ten obrazek, więc leci niżej,

1:53dochodzi do skryptu, pobiera nasz skrypt on się pobrał szybko, wykonuje ten skrypt,

1:59ten skrypt na stronie znajduje obrazek, bo

2:01on rzeczywiście tutaj jest jako element, ale jeszcze nie ma pobranego obrazka,

2:05który jest tam podstawiony. I nasz skrypt próbuje odczytać sobie wielkość tego obrazka

2:11i otrzymuje 0 dlatego, że ta strona jeszcze całkowicie się nie wczytała.

2:16I teraz w jaki sposób możemy sobie z tym poradzić?

2:18Otóż możemy przypisać zdarzenie do obiektu window.

2:21Jest taki obiekt window i też można na nim wykonać addEventListener

2:26i jest zdarzenie, które nazywa się load.

2:29Przekażemy funkcję i powiemy, że chcemy wywołać tę funkcję dopiero wtedy, kiedy

2:33cała strona się wczyta, a więc wszystkie obrazki itd.

2:37W środku możemy się odwołać do tego img,

2:40albo mogłoby to być na zewnątrz, to akurat nie ma znaczenia w tym przypadku.

2:46I tutaj dopiero chcemy wyświetlić wymiary tego obrazka.

2:49Zapiszmy.

2:49I znowu mamy tutaj ustawione to spowolnienie,

2:51odświeża się ta strona

2:53i będziemy czekać aż ona się wczyta,

2:55ale w momencie dopiero jak się wczyta to wywoła się nasza funkcja, która pobierze

2:59wymiary tego obrazka i powinniśmy wtedy dopiero zobaczyć ten wynik w konsoli.

3:04Jak widzimy strona jeszcze się wczytuje,

3:06jeszcze się nie wczytała, chociaż obrazek już widzimy.

3:09A więc to zdarzenie load wykona się

3:10dopiero wtedy, kiedy wczyta się absolutnie wszystko.

3:13No i teraz wymiary obrazka są poprawne.

3:15To może być bardzo przydatne jakbyś tworzył jakiś slider czy inne rzeczy,

3:18gdzie naprawdę bazujesz na wymiarach danego elementu na stronie.

3:22To było zatem zdarzenie load na obiekcie

3:24window, ale mamy jeszcze jedno zdarzenie, które jest bardzo istotne.

3:28Zróbmy sobie coś takiego, że wyszuka na stronie h1 document.querySelector h1.

3:34Mamy tam taki element i będę chciał

3:36odczytać jego tekstContent, czyli po prostu to co znajduje się w tej h1.

3:41Co to będzie ten tekst.

3:43Wyłączymy sobie to spowalnianie, żeby nam się strona szybko wczytywała, więc ze slow

3:47zmienimy na online po prostu i wrócę do konsoli ok?

3:53No i jak widzimy zdarzenie DOMContentLoaded i load czyli wszystko jest ok.

3:57Ale ja już Ci w tym kursie mówiłem, że te skrypty podłączaliśmy cały czas na dole,

4:01a mogą się zdarzyć takie sytuacje i czasami tak jest na stronach, że skrypt

4:05jest podłączany u góry tutaj w elemencie head.

4:08Nie do końca jest to dobra praktyka,

4:09dlatego, że ta cała strona jest biała do momentu aż cały ten skrypt się wczyta, bo

4:13przeglądarka blokuje renderowanie strony jak napotka jakiś skrypt.

4:17Natomiast co by się stało w sytuacji jeżeli ten skrypt byłby w head?

4:20Zobacz, że on jest teraz tutaj i w tym

4:22skrypcie próbujemy się odwołać do h1, pobrać jej tekst content.

4:26Otóż otrzymamy błąd, że chcemy odczytać właściwość textContent na null.

4:31Dlaczego tak się dzieje?

4:32Bo document.querySelektor zwróciło nam

4:34null i my na null, który nie jest obiektem

4:37zrobiliśmy kropka textContent.

4:39I na tym etapie, kiedy ten skrypt się

4:41wczytuje, nie mamy dostępu do tego h1, ale możemy przypisać zdarzenie DOMContentLoaded

4:46tym razem do elementu document czy do tego obiektu addEventListener

4:51i tutaj bardzo ważne jest, żeby to wpisać

4:53odpowiednio, czyli tutaj wielkie litery, potem tak DOMContentLoaded,

4:59chcemy wywołać funkcję

5:01i w tej funkcji znajdziemy h1 i wyświetlimy jej textContent.

5:05Zobacz jaki teraz będzie efekt.

5:06Nie ma błędu i wszystko działa poprawnie.

5:09Czyli innymi słowy to zdarzenie DOMContentLoaded wywoła się dopiero wtedy,

5:13ta funkcja się wtedy wywoła, kiedy przeglądarka sparsuje cały dokument. I wtedy

5:18mamy pewność, że wszystkie elementy na stronie są utworzone, natomiast nie muszą

5:22być pobrane wszystkie obrazki, więc to nie jest to samo co window.load.

5:26Tutaj chodzi tylko o to, że wszystkie

5:28elementy HTML są utworzone, mamy do nich dostęp,

5:31ale gdybyśmy tutaj spróbowali odczytać wielkość tego obrazka, też byśmy otrzymali

5:350 na 0, bo on jeszcze nie został w całości pobrany.

5:39Na koniec pokażę Ci jeszcze atrybut, który

5:41zadziała tak samo jak to zdarzenie DOMContentLoaded

5:43czyli jeżeli to stąd wyciągnę i wykomentuję, dodamy sobie to tutaj zobaczymy błąd,

5:49ale możemy dodawać do skryptu w momencie kiedy go podpinamy

5:52taki atrybut, który nazywa się defer i

5:55on działa dokładnie tak jak DOMContentLoaded.

5:57Czyli to oznacza, że ten skrypt możesz pobrać,

6:00mówimy przeglądarce, ale wykonaj go

6:02dopiero wtedy, kiedy całe drzewo DOM będzie sparsowane.

6:05Więc teraz jeżeli odświeżę,

6:07jak widzisz efekt jest dokładnie taki sam. Czyli z tej lekcji

6:10zapamiętaj sobie, że jeżeli chcesz mieć pewność, że pobierane przez Ciebie

6:14elementy te wyszukiwane na stronie, na stronie na pewno się znajdują, to wywołaj

6:18sobie swój kod w funkcji obsługi DOMContentLoaded i wtedy nie ma znaczenia

6:24czy będziesz podpinał ten skrypt w head czy będzie podpinany na dole

6:27na pewno wszystko będzie ok.

6:29A jeżeli polegasz na jakichś wymiarach lub po prostu chcesz wykonać jakiś kod, kiedy

6:33cała strona już się wczytała, to przypisz do window zdarzenie load.