Recherche…


Chargement de la page, du DOM et du navigateur

Ceci est un exemple pour expliquer les variations des événements de charge.

  1. événement onload
<body onload="someFunction()">
<img src="image1" />
<img src="image2" />
</body>

<script>
    function someFunction() {
    console.log("Hi! I am loaded");
}
</script>

Dans ce cas, le message est enregistré une fois que tout le contenu de la page, y compris les images et les feuilles de style (le cas échéant), est complètement chargé.

  1. Evénement DOMContentLoaded

    document.addEventListener("DOMContentLoaded", function(event) {
        console.log("Hello! I am loaded");
    });
    

Dans le code ci-dessus, le message est enregistré uniquement après le chargement du DOM / document ( c'est-à-dire une fois que le DOM est construit ).

  1. Fonction anonyme auto-appelante

    (function(){
        console.log("Hi I am an anonymous function! I am loaded");
    })();
    

Ici, le message est consigné dès que le navigateur interprète la fonction anonyme. Cela signifie que cette fonction peut être exécutée avant même que le DOM ne soit chargé.



Modified text is an extract of the original Stack Overflow Documentation
Sous licence CC BY-SA 3.0
Non affilié à Stack Overflow