window load JavaScript: come funziona?

In questo articolo vedrai cosa si intenda per window load in JavaScript.

Avrai modo di capire cosa sia questo evento, quando viene creato e come utilizzarlo.

In alcuni contesti risulta essere fondamentale rimanere in ascolto di questo evento per rendere il codice JavaScript della nostra applicazione meno prono ad errori.

Infine, avrai modo di vedere un video dove illustro i concetti spiegati tramite un esempio pratico.

Indice

window load: l’evento JavaScript

In ogni pagina web è disponibile l’oggetto window, con scope globale, ovvero accessibile da ogni parte del codice JavaScript.

Questo oggetto, oltre a contenere le variabili, costanti, funzioni e oggetti globalmente definiti, crea degli eventi per notificare altro software.

L’evento di nostro interesse è load.

Esso viene creato quando tutte le risorse della pagina web hanno caricato con successo.

Nello specifico, le risorse sono:

File JavaScript
Immagini
Fogli di stile (file css)
iframe

Da questa lista vengono escluse le risorse caricate in maniera lazy.

Attendere il caricamento della pagina in JavaScript

Vediamo ora un breve estratto di codice per utilizzare l’evento load dell’oggetto window.

window.addEventListener("load", (e) => {
   // quando questa funzione viene eseguita,
   // tutte le risorse hanno caricato
   console.log("pagina caricata", e);
});

Volendo, è disponibile anche una sintassi alternativa:

window.onload = () => {
   // quando questa funzione viene eseguita,
   // tutte le risorse hanno caricato
   console.log("pagina caricata", e);
});

Nelle prossime sezioni vedremo in quali contesti è necessario utilizzare l’evento load.

Risolvere errore is not defined JavaScript

Il contesto principale dove utilizzare questo evento è l’esecuzione di codice JavaScript che dipende dal caricamento di un altro file.

Facciamo quindi un esempio pratico per comprendere.

Supponiamo di avere un file script.js nel quale utilizziamo la libreria jQuery.

Il file .html della nostra applicazione potrebbe essere qualcosa simile a:

<html>
  <head>
    <script src="jquery.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    ....
  </body>
</html>

Il contenuto del file script.js potrebbe essere:

// qui avrei potuto anche utilizzare $
jQuery(".qualche-classe").addClass("altra-classe");

In questo caso, la buona esecuzione del codice è condizionata al fatto che il file jquery.js abbia caricato prima dell’esecuzione di script.js.

Tuttavia, se il codice è scritto come spiegato in precedenza, questo non è garantito.

Se siamo sfortunati, potremmo invece ottenere l’errore jQuery is not defined.

Se invece utilizzassi l’evento load di window, avremo la certezza che il nostro codice sarà eseguito solo dopo che il (tentativo di caricamento del) file script.js sarà terminato.

Ecco un esempio di codice resiliente:

window.addEventListener("load", () => {
   
  if (jQuery) {
    // qui avrei potuto anche utilizzare $
    jQuery(".qualche-classe").addClass("altra-classe");
  } else {
    
    // stampo un messaggio di errore per notificare che
    // non è stato possibile caricare jQuery
    console.error("purtroppo jQuery non è disponibile");
  }
});

Video esplicativo

Nel video che troverai qui sotto riprodurrò uno scenario simile a quanto descritto in precedenza.

Avremo due files JavaScript: uno conterrà le definizioni di funzioni, l’altro le userà.

Farò in modo che il file contenente le definizioni venga caricato con molto ritardo, per mostrare come l’invocazione diretta dei metodi JavaScript possa essere non sicuro.