Jak sprawdzić, czy strona się załadowała?

Pytanie zadane w tytule wydaje się bardzo proste. Przecież można byłoby użyć jQuery, metody .ready() i zapomnieć o ładowaniu strony. Co jednak w sytuacji, gdy nie używamy biblioteki i piszemy sami kod? Jak sprawdzić ładowanie strony?

Przejdźmy może od razu do gotowego kodu javascript i jego omówienia:

function ready(callback) {
  if (document.readyState === 'complete') {
    window.setTimeout(callback, 0);
  } else {
    window.addEventListener('load', callback);
  }
}

Powyższy kod oczywiście jest metodą gotową do użycia w następujący sposób:

ready(() => {
  console.log(`ready!`);
})

Zatem, jak to działa?

Strona rozpoczyna ładowanie i w document następuje cała „magia”. Właściwość readyState zmienia swoją wartość w zależności od postępu prac nad przygotowaniem strony. W momencie gotowości strony inicjowany jest event „load”, a właściwość readyState otrzymuje wartość „complete” i wykonuje się nasz callback. To oznacza, że nasza metoda ready() się już wykonała, a strona jest gotowa do działania.