JavaScript – uruchomienie kodu JS po wczytaniu się zawartości strony

Jest to jedna z częściej używanych technik podczas porogramowania w języku JavaScript. Często chcemy aby wskazana metoda lub kawałek innego kodu uruchomił się dopiero po załadowaniu się strony. W tym miejscu warto nadmienić, że wczytywanie zawartosci składa się dwóch etapów:

  1. kod HTML strony (DOM)
  2. osazona na stronie zawartość (obrazki, czcionki, pliki CSS/JS, etc.)

Jako programista musisz (bądź zechcesz) zdecydować po którym z wyżej wymienionych etapów chcesz uruchomić swój kod. Nieco niżej znajdziesz przykłady dla obu przypadków czyli wykonanie kodu JavaScript po wczytaniu się DOM oraz po wczytaniu się całej pozostałej osadzonej na stronie zawartości.

Sposób #1 – wykorzystanie jQuery

Bardzo popularnym sposobem jest wykorzystanie jQuery oraz dedykowanej dyrektywy:

$(document).ready(function() {
  /* Twoj kod JavaScript */
});

jQuery wraz z powyższą metodą bardzo upraszcza ten proces. Niemniej powyższy sposób nie pozwala na zdefiniowanie etapu wykonania naszego kodu JavaScript. Czyli nie możemy zdecydować o tym czy nasz kod zostanie uruchomiony po wczytaniu się DOM (etap 1.) czy po wczytaniu się całej treści strony (etap 2.).

Czemu jQuery jest kłopotliwe w przypadku tego rozwiązania?

Dodatkowym kłopotem z wykorzystaniem framework-a jQuery jest fakt, że obecnie trend zmierza ku natywnemu programowaniu w JavaScript bez wykorzystania jQuery i tym podobnych kombajnów. Oczywiście coś za coś – zyskujemy większą swobodę natomiast nadrabiamy ją często gęsto nieco większą ilością linii kodu. Oczywiście wszystko zależy od sterylności pisania i wprawy.

A więc kwetsią osobistego wyboru jest to który kierunek obierzesz jako twórca kodu JavaScript. Osobiście do tej pory bardzo często wykorzystywałem jQuery w swoich projektach. Jednak obecnie staram się odchodzić od tego rozwiązania na rzecz pisania w sposób najbardziej natywny.

Sposób #2 – zrób to sam w czystym JavaScript 😉

Jak wspomniałem wyżej istnieje możliwość napisania specjalnej procedury w czystym JS. Będzie ona odpowiadała za wykonanie naszego kodu w odpowiedniej sekwencji podczas wczytywania się strony WWW.

Oto przykład:

document.onreadystatechange = function () {
  switch (document.readyState) {

    // Etap 0
    // Dokument (DOM) jest w trakcie wczytywania
    case "loading":
      /* Twoj kod JavaScript */
      break;

    // Etap 1
    // Dokument wczytał się w całości (DOM),
    // można już uzyskać dostęp do jego elementów.
    case "interactive":
      /* Twoj kod JavaScript */
      break;

    // Etap 2
    // Strona jest wczytana w całości wraz ze
    // wszystkimi elementami (obrazkami, etc.)
    case "complete":
      /* Twoj kod JavaScript */
      break;
  }
};

Jak zapewne zwróciłeś uwagę powyższy przykład zawiera trzy, a nie dwa etapy o których wspominałem wcześniej. Otóż etap 0 (zerowy) jest w zasadzie bezużyteczny. Czemu? Wówczas nie ma jeszcze żadnej zawartości z którą można pracować. Oczywiście Twoja fantazja jako programisty może i tu zechcieć się w jakiś sposób zrealizować. Dlatego w przykładzie zamieściłem wszystkie możliwe do obsłużenia etapy wczytywania się zawartości strony WWW.

Tak oto można za pomocą prostego kodu osiągnąć zamierzony efekt. Bez użycia jQuery czy innego frameworka możemy oprogramować tę ścieżkę posługując się tylko i wyłącznie natywnym językiem JavaScript. 🙂 Słodko!

Staram się uzupełniać bibliotekę przykładów dla języka JavaScript i w miarę możliwości będę ją udostępniał w ramach mojej strony domowej.

Jeśli masz pytania bądź uznasz, że mój opis jest niekompletny lub błędny – nie krępuj się i zamieść swój komentarz pod tym artykułem. Chętnie rozszerzę moją wiedzę w tym temacie.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *