La proprietà readyState in Javascript

La proprietà document.readyState in Javascript è molto utile per capire in che stato di caricamento si trova la pagina web.

document.readyState

Si tratta di una proprietà dell'oggetto `document` in JavaScript che restituisce lo stato corrente del documento HTML.

La proprietà può avere tre valori possibili:

• loading: il documento è ancora in fase di caricamento.
• interactive: il documento è stato caricato, ma non tutte le risorse esterne (come immagini e fogli di stile) sono state completate.
• complete: il documento e tutte le sue risorse sono stati completamente caricati.

Questa informazione mi consente di capire se il caricamento della pagina o delle sue parti è stato completato

Per modificare il DOM con Javascript è meglio essere sicuri che il documento sia almeno in stato "interactive", altrimenti il tuo script potrebbe non trovare tutti gli elementi su cui deve agire.

Ad esempio, questo script esegue il codice non appena il DOM è pronto

document.addEventListener('readystatechange', function() {
   if (document.readyState === 'interactive') {
      console.log('Il DOM è pronto!');
         // inserire il codice qui
        }
    });

In quest'altro esempio, invece, attendo che lo stato diventi `"complete"` prima di eseguire il codice.

document.addEventListener('readystatechange', function() {
    if (document.readyState === 'complete') {
       console.log('Tutto è caricato!');
          // Esegui script che dipendono da risorse esterne qui
          }
     });

In questo modo posso condizionare l'esecuzione dello script allo stato del documento.

E così via.