Maison  >  Article  >  interface Web  >  Comment remplacer $(document).ready() dans un monde sans jQuery ?

Comment remplacer $(document).ready() dans un monde sans jQuery ?

Linda Hamilton
Linda Hamiltonoriginal
2024-11-05 21:44:02324parcourir

How to Replace $(document).ready() in a jQuery-Free World?

Dévoilement de l'alternative non-jQuery : équivalents pour $(document).ready()

Lorsque vous vous lancez dans des projets de développement Web sans les capacités robustes de jQuery, il est crucial explorer des méthodes alternatives pour obtenir des résultats similaires. Un tel scénario se présente lorsque l'on recherche un équivalent pour la fonction $(document).ready() largement utilisée.

Pour les navigateurs adhérant aux normes ECMA, l'extrait suivant offre un remplacement transparent :

document.addEventListener("DOMContentLoaded", function() {
  // Code goes here
});

Ce script déclenche l'exécution des blocs de code spécifiés une fois l'arborescence Document Object Model (DOM) chargée. Il surveille exclusivement la structure DOM, à l'exclusion des actifs externes tels que les images et les feuilles de style.

Se distinguer de window.onload

Il convient de noter que window.onload ne fournit pas de fonctionnalité équivalente à $(document).ready() de JQuery. Alors que window.onload attend que toutes les ressources, y compris les ressources externes, soient complètement chargées avant d'exécuter le code, $(document).ready() détecte uniquement la disponibilité du DOM. Cette différence subtile peut avoir un impact sur le comportement des applications, en particulier dans les situations où le chargement de ressources externes peut entraîner des retards de performances.

Compatibilité des navigateurs IE8 et versions antérieures

Pour garantir la compatibilité avec IE8 et versions antérieures navigateurs, l'extrait de code suivant fournit une option alternative :

document.onreadystatechange = function () {
    if (document.readyState == "interactive") {
        // Code goes here
    }
}

Ce script s'appuie sur l'événement onreadystatechange et vérifie l'état de préparation du document « interactif » pour lancer l'exécution du code.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn