HTML/JS onload-konsept kan hjelpe deg med å kontrollere oppførselen til nettsiden når den er lastet inn.

Å laste inn en nettside inkluderer å vente på at sidens innhold, bilder og andre ressurser er fullstendig lastet.

Noen nettsider sikrer at visse funksjoner ikke oppstår før alt er ferdig lastet. Et eksempel inkluderer å hente data fra en database først etter at siden er lastet.

Det er forskjellige måter du kan sjekke om en nettside er fullastet. Du kan lytte til hendelser ved å bruke JavaScript-hendelsesbehandlere, bruk window.onload JavaScript-hendelse, eller på Last HTML-attributt.

Slik bruker du onLoad med Body HTML-elementet

Du kan bruke JavaScript-hendelser for å sjekke om hoveddelen av nettsiden er lastet inn. Du trenger en HTML-fil med noe sideinnhold og en JavaScript-fil for å kjøre koden.

Koden som brukes i dette prosjektet er tilgjengelig i en GitHub-depot og er gratis for deg å bruke under MIT-lisensen.

  1. I en ny HTML-fil kalt index.html, legg til følgende grunnleggende HTML-kode: 
    html>
    <html>
    <hode>
    <tittel>Eksempel ved bruk av onloadtittel>
    hode>
    <kropp>
    <h1>Eksempel ved bruk av onload()h1>
    <s>Dette eksemplet viser hvordan du bruker onload()-hendelsen i JavaScript.s>
    kropp>
    html>
  2. Opprett en ny fil i samme mappe som heter script.js. Koble denne filen til HTML-siden din ved å bruke script-taggen. Du kan legge til script-taggen nederst på body-taggen:
    <kropp>
     Innholdet ditt 
    <manussrc="script.js">manus>
    kropp>
  3. Legg til en tom avsnittskode i innholdet i HTML-koden.
    <sid="produksjon">s>
  4. Inne i JavaScript-filen legger du til window.onload hendelsesfunksjon. Dette vil utføres når siden er lastet inn:
    vindu.onload = funksjon() {
    // kode som skal kjøres når siden lastes
    };
  5. Inne i funksjonen fyller du inn innholdet i den tomme avsnittskoden. Dette vil endre avsnittskoden til å vise en melding bare når siden er lastet inn:
    dokument.getElementById("produksjon").innerHTML = "Siden er lastet!";
  6. Alternativt kan du også bruke en hendelseslytter å lytte etter DOMContentLoaded begivenhet. DOMContentLoaded utløses tidligere enn window.onload. Den utløses så snart HTML-dokumentet er klart, i stedet for å vente på at alle eksterne ressurser skal lastes.
    dokument.addEventListener('DOMContentLoaded', funksjon() {
    dokument.getElementById("produksjon").innerHTML = "Siden er lastet!";
    });
  7. Åpne filen index.html i en nettleser for å se meldingen når siden er ferdig lastet:
  8. I stedet for å bruke JavaScript-hendelser for å sjekke om en side har lastet inn, kan du også bruke på Last HTML-attributt for samme resultat. Legg til onload-attributtet til body-taggen i HTML-filen din:
    <kropppå Last="i det()">
  9. Opprett i det() funksjon inne i JavaScript-filen. Det anbefales ikke å bruke både onload HTML-attributtet og onload JavaScript-hendelsen samtidig. Å gjøre det kan føre til uventet oppførsel eller konflikter mellom de to funksjonene.
    funksjoni det() {
    dokument.getElementById("produksjon").innerHTML = "Siden er lastet!";
    }

Vi anbefaler å bruke JavaScript-hendelseslyttere og window.onload metode over HTML på Last attributt fordi det er en god praksis å holde atferden og innholdet på nettsiden atskilt. JavaScript-hendelseslyttere gir også mer kompatibilitet og fleksibilitet i forhold til de to andre metodene.

Slik bruker du onLoad med bilde-HTML-elementet

Du kan også bruke onload-hendelsen til å kjøre kode når andre elementer lastes inn på siden. Et eksempel på dette er bildeelementet.

  1. Legg til et hvilket som helst bilde i samme mappe som index.html-filen.
  2. Inne i HTML-filen legger du til en bildekode og kobler src-attributtet til navnet på bildet som er lagret i mappen.
    <imgid="mitt bilde"src="Pidgeymon.png"bredde="300">
  3. Legg til en annen tom avsnittskode for å vise en melding når bildet lastes inn:
    <sid="imageLoadedMessage">s>
  4. Inne i JavaScript-filen legger du til en onload-hendelse på bildet. Bruk den unike ID-en mitt bilde for å bestemme hvilket bildeelement som skal legges til onload-hendelsen til:
    var mitt bilde = dokument.getElementById("mitt bilde");
    myImage.onload = funksjon() {

    };
  5. Inne i onload-hendelsen endrer du den indre HTML-en for å legge til Bildet er lastet inn beskjed:
    dokument.getElementById("imageLoadedMessage").innerHTML = "Bilde lastet!";
  6. I stedet for å bruke myImage.onload, kan du også bruke en hendelseslytter til å lytte til laste JavaScript-hendelse:
    myImage.addEventListener('laste', funksjon() {
    dokument.getElementById("imageLoadedMessage").innerHTML = "Bilde lastet!";
    });
  7. Åpne index.html i en nettleser for å se bildet og meldingen:
  8. For det samme resultatet kan du også bruke onload HTML-attributtet. I likhet med body-taggen, legg til et onload-attributt til img-taggen:
    <imgid="mitt bilde"src="Pidgeymon.png"bredde="300"på Last="imageLoaded()">
  9. Legg til funksjonen i JavaScript-filen for å utføre koden når bildet er lastet:
    funksjonimageLoaded() {
    dokument.getElementById("imageLoadedMessage").innerHTML = "Bilde lastet!";
    }

Slik bruker du onLoad når du laster JavaScript

Du kan bruke HTML onload-attributtet for å sjekke om nettleseren har lastet JavaScript-filen ferdig. Det er ingen tilsvarende JavaScript-innlastingshendelse for skripttaggen.

  1. Legg til onload-attributtet til script-taggen i HTML-filen din.
    <manussrc="script.js"på Last="LoadedJs()">manus>
  2. Legg til funksjonen i JavaScript-filen din. Skriv ut en melding innen logger på nettleserkonsollen:
    funksjonLoadedJs() {
    konsoll.Logg("JS lastet av nettleseren!");
    }
  3. Åpne filen index.html i nettleseren. Du kan bruk Chrome DevTools for å se alle meldinger som sendes ut i konsollen.

Laster nettsider i nettleseren

Nå kan du bruke funksjoner og hendelser til å utføre bestemt kode når en nettside er fullført. Å laste inn sider er en stor faktor for å skape en jevn og sømløs brukeropplevelse.

Du kan lære mer om hvordan du kan integrere mer interessante lastesidedesign på nettstedet ditt.