Il concetto di caricamento HTML/JS può aiutarti a controllare il comportamento della pagina Web una volta caricata.

Il caricamento di una pagina Web include l'attesa del caricamento completo del contenuto della pagina, delle immagini e di altre risorse.

Alcune pagine Web assicurano che determinate funzionalità non si verifichino fino a quando non è terminato il caricamento di tutto. Un esempio include il recupero dei dati da un database solo dopo che la pagina è stata caricata.

Esistono diversi modi per verificare se una pagina Web è completamente caricata. Puoi ascoltare gli eventi utilizzando i gestori di eventi JavaScript, utilizzare il file window.onload Evento JavaScript o il file onload Attributo HTML.

Come utilizzare onLoad con l'elemento HTML del corpo

Puoi utilizzare gli eventi JavaScript per verificare se il corpo della pagina web è stato caricato. Avrai bisogno di un file HTML con alcuni contenuti della pagina e un file JavaScript per eseguire il codice.

Il codice utilizzato in questo progetto è disponibile in a Deposito GitHub ed è gratuito per l'uso con la licenza MIT.

instagram viewer
  1. In un nuovo file HTML chiamato indice.html, aggiungi il seguente codice HTML di base:
    html>
    <html>
    <Testa>
    <titolo>Esempio usando onloadtitolo>
    Testa>
    <corpo>
    <h1>Esempio usando onload()h1>
    <P>Questo esempio mostra come utilizzare l'evento onload() in JavaScript.P>
    corpo>
    html>
  2. Crea un nuovo file nella stessa cartella chiamata script.js. Collega questo file alla tua pagina HTML utilizzando il tag script. Puoi aggiungere il tag script nella parte inferiore del tag body:
    <corpo>
     I tuoi contenuti 
    <copionesrc="script.js">copione>
    corpo>
  3. All'interno del contenuto del tag body HTML, aggiungi un tag di paragrafo vuoto.
    <Pid="produzione">P>
  4. All'interno del file JavaScript, aggiungi il file window.onload funzione evento. Questo verrà eseguito quando la pagina è stata caricata:
    finestra.onload = funzione() {
    // codice da eseguire quando la pagina viene caricata
    };
  5. All'interno della funzione, popolare il contenuto del tag di paragrafo vuoto. Questo cambierà il tag del paragrafo per visualizzare un messaggio solo quando la pagina è stata caricata:
    documento.getElementById("produzione").innerHTML = "Pagina caricata!";
  6. In alternativa, puoi anche utilizzare un ascoltatore di eventi ascoltare il DOMContentLoaded evento. DOMContentLoaded attiva prima di window.onload. Si attiva non appena il documento HTML è pronto, anziché attendere il caricamento di tutte le risorse esterne.
    documento.addEventListener('Contenuto DOM caricato', funzione() {
    documento.getElementById("produzione").innerHTML = "Pagina caricata!";
    });
  7. Apri il file index.html in un browser Web per visualizzare il messaggio al termine del caricamento della pagina:
  8. Invece di utilizzare gli eventi JavaScript per verificare se una pagina è stata caricata, puoi anche utilizzare il file onload Attributo HTML per lo stesso risultato. Aggiungi l'attributo onload al tag body nel tuo file HTML:
    <corpoonload="dentro()">
  9. Crea il dentro() funzione all'interno del file JavaScript. Non è consigliabile utilizzare contemporaneamente l'attributo onload HTML e l'evento onload JavaScript. Ciò potrebbe causare comportamenti imprevisti o conflitti tra le due funzioni.
    funzionedentro() {
    documento.getElementById("produzione").innerHTML = "Pagina caricata!";
    }

Si consiglia di utilizzare i listener di eventi JavaScript e il file window.onload metodo sull'HTML onload perché mantenere separati il ​​comportamento e il contenuto della pagina web è una buona pratica. Inoltre, i listener di eventi JavaScript forniscono maggiore compatibilità e flessibilità rispetto agli altri due metodi.

Come utilizzare onLoad con l'elemento HTML immagine

Puoi anche utilizzare l'evento onload per eseguire il codice quando altri elementi vengono caricati sulla pagina. Un esempio di ciò è l'elemento immagine.

  1. All'interno della stessa cartella del file index.html, aggiungi qualsiasi immagine.
  2. All'interno del file HTML, aggiungi un tag immagine e collega l'attributo src al nome dell'immagine salvata nella cartella.
    <immid="miaImmagine"src="Pidgeymon.png"larghezza="300">
  3. Aggiungi un altro tag di paragrafo vuoto per visualizzare un messaggio quando l'immagine viene caricata:
    <Pid="imageLoadedMessage">P>
  4. All'interno del file JavaScript, aggiungi un evento onload sull'immagine. Usa l'ID univoco myImmagine per determinare a quale elemento dell'immagine aggiungere l'evento onload:
    var miaImmagine = documento.getElementById("miaImmagine");
    miaImmagine.onload = funzione() {

    };
  5. All'interno dell'evento onload, modifica l'HTML interno per aggiungere il file Immagine caricata Messaggio:
    documento.getElementById("imageLoadedMessage").innerHTML = "Immagine caricata!";
  6. Invece di usare myImage.onload, puoi anche utilizzare un listener di eventi per ascoltare il file carico Evento javascript:
    myImage.addEventListener('carico', funzione() {
    documento.getElementById("imageLoadedMessage").innerHTML = "Immagine caricata!";
    });
  7. Apri index.html in un browser Web per visualizzare l'immagine e il messaggio:
  8. Per lo stesso risultato, puoi anche utilizzare l'attributo HTML onload. Analogamente al tag body, aggiungi un attributo onload al tag img:
    <immid="miaImmagine"src="Pidgeymon.png"larghezza="300"onload="immagine caricata()">
  9. Aggiungi la funzione nel file JavaScript, per eseguire il codice quando l'immagine è stata caricata:
    funzioneimmagine Caricato() {
    documento.getElementById("imageLoadedMessage").innerHTML = "Immagine caricata!";
    }

Come utilizzare onLoad durante il caricamento di JavaScript

È possibile utilizzare l'attributo HTML onload per verificare se il browser ha terminato il caricamento del file JavaScript. Non esiste un evento onload JavaScript equivalente per il tag script.

  1. Aggiungi l'attributo onload al tag script nel tuo file HTML.
    <copionesrc="script.js"onload="LoadedJs()">copione>
  2. Aggiungi la funzione al tuo file JavaScript. Stampa un messaggio di accedere alla console del browser:
    funzioneLoadedJs() {
    consolare.tronco d'albero("JS caricato dal browser!");
    }
  3. Apri il file index.html nel browser. Puoi usa Chrome DevTools per visualizzare eventuali messaggi inviati alla console.

Caricamento di pagine Web nel browser

Ora puoi utilizzare funzioni ed eventi per eseguire un determinato codice quando una pagina web ha completato il caricamento. Il caricamento delle pagine è un fattore importante nella creazione di un'esperienza utente fluida e senza interruzioni.

Puoi saperne di più su come integrare design di pagine di caricamento più interessanti nel tuo sito web.