HTML/JS onload-koncept kan hjælpe dig med at kontrollere websidens adfærd, når den er indlæst.
Indlæsning af en webside inkluderer at vente på, at sidens indhold, billeder og andre ressourcer er fuldstændig indlæst.
Nogle websider sikrer, at visse funktioner ikke opstår, før alt er indlæst. Et eksempel omfatter kun at hente data fra en database, efter at siden er indlæst.
Der er forskellige måder, du kan kontrollere, om en webside er fuldt indlæst. Du kan lytte til begivenheder ved hjælp af JavaScript-hændelseshandlere, brug window.onload JavaScript-begivenhed eller påfyldning HTML attribut.
Sådan bruges onLoad med Body HTML-elementet
Du kan bruge JavaScript-hændelser til at kontrollere, om selve websiden er indlæst. Du skal bruge en HTML-fil med noget sideindhold og en JavaScript-fil for at udføre koden.
Koden brugt i dette projekt er tilgængelig i en GitHub-depot og er gratis for dig at bruge under MIT-licensen.
- I en ny HTML-fil kaldet index.html, tilføj følgende grundlæggende HTML-kode:
html>
<html>
<hoved>
<titel>Eksempel ved brug af onloadtitel>
hoved>
<legeme>
<h1>Eksempel ved brug af onload()h1>
<s>Dette eksempel viser, hvordan du bruger hændelsen onload() i JavaScript.s>
legeme>
html> - Opret en ny fil i samme mappe kaldet script.js. Link denne fil til din HTML-side ved hjælp af script-tagget. Du kan tilføje script-tagget i bunden af body-tagget:
<legeme>
Dit indhold
<manuskriptsrc="script.js">manuskript>
legeme> - Tilføj et tomt afsnitstag i indholdet i dit HTML-body-tag.
<sid="produktion">s> - Inden i JavaScript-filen skal du tilføje window.onload begivenhedsfunktion. Dette udføres, når siden er indlæst:
vindue.onload = fungere() {
// kode til at køre, når siden indlæses
}; - Inden i funktionen skal du udfylde indholdet af det tomme afsnitstag. Dette vil ændre afsnitsmærket til kun at vise en meddelelse, når siden er indlæst:
dokument.getElementById("produktion").innerHTML = "Siden er indlæst!"; - Alternativt kan du også bruge en begivenhedslytter at lytte efter DOMContentLoaded begivenhed. DOMContentLoaded udløses tidligere end window.onload. Den udløses, så snart HTML-dokumentet er klar, i stedet for at vente på, at alle eksterne ressourcer indlæses.
dokument.addEventListener('DOMContentLoaded', fungere() {
dokument.getElementById("produktion").innerHTML = "Siden er indlæst!";
}); - Åbn filen index.html i en webbrowser for at se meddelelsen, når siden er færdig med at indlæse:
- I stedet for at bruge JavaScript-hændelser til at kontrollere, om en side er indlæst, kan du også bruge påfyldning HTML-attribut for det samme resultat. Tilføj onload-attributten til body-tagget i din HTML-fil:
<legemepåfyldning="i det()"> - Opret i det() funktion inde i JavaScript-filen. Det anbefales ikke at bruge både onload HTML-attributten og onload JavaScript-hændelsen på samme tid. Hvis du gør det, kan det føre til uventet adfærd eller konflikter mellem de to funktioner.
fungerei det() {
dokument.getElementById("produktion").innerHTML = "Siden er indlæst!";
}
Vi anbefaler at bruge JavaScript-hændelseslyttere og window.onload metode over HTML påfyldning attribut, fordi det er en god praksis at holde websidens adfærd og indhold adskilt. Også JavaScript-hændelseslyttere giver mere kompatibilitet og fleksibilitet i forhold til de to andre metoder.
Sådan bruges onLoad med billed-HTML-elementet
Du kan også bruge onload-hændelsen til at udføre kode, når andre elementer indlæses på siden. Et eksempel på dette er billedelementet.
- Tilføj et hvilket som helst billede i den samme mappe som din index.html-fil.
- Tilføj et billedtag inde i HTML-filen, og link src-attributten til navnet på billedet, der er gemt i mappen.
<imgid="mit billede"src="Pidgeymon.png"bredde="300"> - Tilføj endnu et tomt afsnitstag for at vise en besked, når billedet indlæses:
<sid="imageLoadedMessage">s> - Tilføj en onload-hændelse på billedet inde i JavaScript-filen. Brug det unikke id mit billede for at bestemme, hvilket billedelement onload-hændelsen skal føjes til:
var mit billede = dokument.getElementById("mit billede");
myImage.onload = fungere() {
}; - Inde i onload-hændelsen skal du ændre den indre HTML for at tilføje Billedet er indlæst besked:
dokument.getElementById("imageLoadedMessage").innerHTML = "Billedet er indlæst!"; - I stedet for at bruge myImage.onload, kan du også bruge en begivenhedslytter til at lytte til belastning JavaScript-begivenhed:
myImage.addEventListener('belastning', fungere() {
dokument.getElementById("imageLoadedMessage").innerHTML = "Billedet er indlæst!";
}); - Åbn index.html i en webbrowser for at se billedet og beskeden:
- For det samme resultat kan du også bruge onload HTML-attributten. I lighed med body-tagget skal du tilføje en onload-attribut til img-tagget:
<imgid="mit billede"src="Pidgeymon.png"bredde="300"påfyldning="imageLoaded()"> - Tilføj funktionen i JavaScript-filen for at udføre koden, når billedet er indlæst:
fungereimageLoaded() {
dokument.getElementById("imageLoadedMessage").innerHTML = "Billedet er indlæst!";
}
Sådan bruges onLoad, når JavaScript indlæses
Du kan bruge HTML onload-attributten til at kontrollere, om browseren er færdig med at indlæse JavaScript-filen. Der er ingen tilsvarende JavaScript-onload-hændelse for script-tagget.
- Tilføj onload-attributten til script-tagget i din HTML-fil.
<manuskriptsrc="script.js"påfyldning="LoadedJs()">manuskript> - Tilføj funktionen til din JavaScript-fil. Udskriv en besked pr logger på browserkonsollen:
fungereLoadedJs() {
konsol.log("JS indlæst af browseren!");
} - Åbn filen index.html i browseren. Du kan bruge Chrome DevTools for at se eventuelle meddelelser, der sendes til konsollen.
Indlæsning af websider i browseren
Nu kan du bruge funktioner og hændelser til at udføre bestemt kode, når en webside er færdig med at indlæse. Indlæsning af sider er en stor faktor for at skabe en glat og problemfri brugeroplevelse.
Du kan lære mere om, hvordan du kan integrere mere interessante indlæsningssidedesign på din hjemmeside.
