Comment obtenir la fonctionnalité $(document).ready() avec Vanilla JavaScript ?

Alternative non jQuery à $(document).ready()

La bibliothèque jQuery standard de l'industrie fournit le $(document). méthode ready(), qui permet aux développeurs d'exécuter du code une fois le modèle d'objet de document (DOM) entièrement chargé, garantissant que tous les éléments sont accessibles et que le contenu de la page est prêt à être manipulé. Cependant, quelles sont les alternatives à cette méthode lorsque vous travaillez avec du JavaScript Vanilla ?

Réponse :

L'équivalent non-jQuery de $(document).ready() est obtenu grâce aux auditeurs d’événements. L'extrait de code suivant montre comment obtenir cette fonctionnalité :

<code class="javascript">document.addEventListener("DOMContentLoaded", function() {
    // code to be executed when the DOM is fully loaded
});</code>

Cette implémentation produit le même résultat que $(document).ready(), permettant aux développeurs d'exécuter du code uniquement une fois le DOM terminé.

Considérations supplémentaires :

Bien que document.addEventListener("DOMContentLoaded") fournisse une solution pour attendre que le DOM soit prêt, il diffère de window.onload en termes de comportement. $(document).ready() attend uniquement que le DOM soit complet, tandis que window.onload attend à la fois le DOM et tous les actifs externes, y compris les images et les scripts.

Alternative pour les navigateurs plus anciens ( IE8 et inférieur) :

Pour les navigateurs plus anciens tels qu'Internet Explorer 8 et inférieur, l'alternative suivante peut être utilisée :

<code class="javascript">document.onreadystatechange = function() {
    if (document.readyState === "interactive") {
        // code to be executed when the DOM is fully loaded
    }
};</code>

Gardez à l'esprit qu'il existe des états alternatifs en plus "interactif." Consultez la documentation de Mozilla Developer Network (MDN) pour plus d'informations.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!