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.