JavaScript DOM Ready

Le chargement d’un site Web commence par le téléchargement du document HTML. Une fois le document HTML téléchargé, le code HTML est analysé et les éléments requis sont téléchargés. Une fois le HTML analysé, le DOM et le CSS sont rendus en parallèle. Après cela, le navigateur prend en charge les fonctions JavaScript onload. C’est le délai que nous voulons appeler des fonctions car HTML, CSS, DOM sont correctement rendus. Ce didacticiel explique comment appeler une fonction lorsque le DOM est prêt.

Utilisez la fonction jQuery ready() pour appeler des fonctions lorsque le DOM est prêt

La fonction ready() de jQuery exécute le code lorsque le DOM est prêt. Il attend que tous les éléments soient complètement chargés, puis essaie d’y accéder et de les manipuler. On peut sélectionner l’élément document, un élément vide pour appeler une fonction, ou même appeler directement une fonction.

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

Il s’agit d’une méthode compatible avec tous les navigateurs et peut être appelée de n’importe où dans le code HTML.

Approche JavaScript vanille des fonctions d’appel lorsque DOM est prêt

Nous pouvons créer l’équivalent JavaScript de la fonction ready() de jQuery en utilisant l’événement DOMContentLoaded. Nous pouvons ajouter un écouteur d’événement pour DOMContentLoaded et appeler la fonction souhaitée avec cet écouteur d’événement. Mais il y a un problème, le rappel ne sera pas déclenché si l’événement s’est déjà produit. Nous prenons donc en charge cette condition en vérifiant l’état prêt de l’objet document.

const callback = function() {};

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

Il existe quelques astuces autres que ces méthodes qui nous aident à résoudre ce problème, mais peuvent ne pas être idéales dans tous les cas.

• Utilisez l’attribut onload de la fenêtre pour appeler la fonction JavaScript.
• Utilisez l’attribut onload du corps pour appeler la fonction JavaScript. Cette méthode peut être terriblement lente car elle attend que chaque élément soit chargé.
• On peut appeler la fonction à exécuter depuis la fin du corps. À la fin du corps, DOM est correctement rendu et prêt. Ainsi, il n’y a aucun problème avec les appels de fonction liés à un élément. Il fonctionne beaucoup plus vite que le gestionnaire onload du corps car il n’attend pas que les images soient complètement chargées.