Predisposto per DOM JavaScript

Il caricamento di un sito web inizia dal download del documento HTML. Una volta scaricato il documento HTML, l’HTML viene analizzato e gli asset richiesti vengono scaricati. Dopo che l’HTML è stato analizzato, il DOM e il CSS vengono visualizzati in parallelo. Dopodiché, il browser si occupa delle funzioni onload di JavaScript. Questo è il lasso di tempo che vogliamo chiamare le funzioni perché HTML, CSS, DOM sono renderizzati correttamente. Questo tutorial insegna come chiamare una funzione quando il DOM è pronto.

Usa la funzione jQuery ready() per chiamare le funzioni quando DOM è pronto

La funzione ready() in jQuery esegue il codice quando il DOM è pronto. Aspetta che tutti gli elementi siano completamente caricati e quindi cerca di accedervi e manipolarli. Possiamo selezionare l’elemento documento, un elemento vuoto per chiamare una funzione, o anche chiamare direttamente una funzione.

$(document).ready(function() {
  // callback function / handler
});

È un metodo compatibile con tutti i browser e può essere chiamato da qualsiasi punto del codice HTML.

Approccio vanilla JavaScript per chiamare le funzioni quando DOM è pronto

Possiamo creare l’equivalente JavaScript della funzione ready() di jQuery utilizzando l’evento DOMContentLoaded. Possiamo aggiungere un listener di eventi per DOMContentLoaded e chiamare la nostra funzione desiderata con quel listener di eventi. Ma c’è un problema, la richiamata non verrà attivata se l’evento si è già verificato. Quindi, ci occupiamo di questa condizione controllando lo stato di pronto dell’oggetto documento.

const callback = function() {};

if (document.readyState === 'complete' ||
    document.readyState === 'interactive') {
  setTimeout(callback, 1);
} else {
  document.addEventListener('DOMContentLoaded', callback);
}

Ci sono alcuni trucchi diversi da questi metodi che ci aiutano a risolvere questo problema ma potrebbero non essere l’ideale in tutti i casi.

• Usa l’attributo onload della finestra per chiamare la funzione JavaScript.
• Utilizza l’attributo onload del corpo per chiamare la funzione JavaScript. Questo metodo può essere terribilmente lento in quanto attende il caricamento di ogni singolo elemento.
• Possiamo chiamare la funzione da eseguire dalla fine del corpo. Alla fine del corpo, DOM è opportunamente renderizzato e pronto. Quindi, non ci sono problemi con le chiamate di funzione relative a qualsiasi elemento. Funziona molto più velocemente dell’handler onload del corpo perché non attende che le immagini vengano caricate completamente.