JavaScript Caricamento della pagina, del DOM e del browser


Esempio

Questo è un esempio per spiegare le variazioni degli eventi di caricamento.

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

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

In questo caso, il messaggio viene registrato una volta che tutti i contenuti della pagina incluse le immagini e i fogli di stile (se presenti) sono stati caricati completamente.

  1. Evento DOMContentLoaded

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

Nel codice precedente, il messaggio viene registrato solo dopo che il DOM / documento è stato caricato ( es .: una volta che il DOM è stato creato ).

  1. Funzione anonima autoinviante

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

Qui, il messaggio viene registrato non appena il browser interpreta la funzione anonima. Significa che questa funzione può essere eseguita anche prima che il DOM venga caricato.