HTML/JS onload-koncept kan hjälpa dig att kontrollera webbsidans beteende när den väl har laddats.
Att ladda en webbsida inkluderar att vänta på att sidans innehåll, bilder och andra resurser ska laddas helt.
Vissa webbsidor säkerställer att viss funktionalitet inte inträffar förrän allt har laddats klart. Ett exempel inkluderar att hämta data från en databas först efter att sidan har laddats.
Det finns olika sätt att kontrollera om en webbsida är fulladdad. Du kan lyssna på händelser med JavaScript-händelsehanterare, använd window.onload JavaScript-händelse, eller ladda HTML-attribut.
Hur man använder onLoad med Body HTML-elementet
Du kan använda JavaScript-händelser för att kontrollera om webbsidans brödtext har laddats. Du behöver en HTML-fil med visst sidinnehåll och en JavaScript-fil för att exekvera koden.
Koden som används i detta projekt är tillgänglig i en GitHub-förråd och är gratis för dig att använda under MIT-licensen.
- I en ny HTML-fil som heter index.html, lägg till följande grundläggande HTML-kod:
html>
<html>
<huvud>
<titel>Exempel med onloadtitel>
huvud>
<kropp>
<h1>Exempel med onload()h1>
<sid>Det här exemplet visar hur man använder händelsen onload() i JavaScript.sid>
kropp>
html> - Skapa en ny fil i samma mapp som heter script.js. Länka den här filen till din HTML-sida med hjälp av script-taggen. Du kan lägga till script-taggen längst ned på body-taggen:
<kropp>
Ditt innehåll
<manussrc="script.js">manus>
kropp> - Lägg till en tom stycketagg i innehållet i din HTML-kroppstagg.
<sidid="produktion">sid> - Lägg till i JavaScript-filen window.onload händelsefunktion. Detta kommer att köras när sidan har laddats:
fönster.onload = fungera() {
// kod som ska köras när sidan laddas
}; - Fyll i innehållet i den tomma stycketaggen inuti funktionen. Detta kommer att ändra stycketaggen så att ett meddelande endast visas när sidan har laddats:
dokumentera.getElementById("produktion").innerHTML = "Sida laddad!"; - Alternativt kan du också använda en händelseavlyssnare att lyssna efter DOMContentLoaded händelse. DOMContentLoaded triggers tidigare än window.onload. Den utlöses så snart HTML-dokumentet är klart, snarare än att vänta på att alla externa resurser ska laddas.
dokumentera.addEventListener('DOMContentLoaded', fungera() {
dokumentera.getElementById("produktion").innerHTML = "Sida laddad!";
}); - Öppna filen index.html i en webbläsare för att se meddelandet när sidan är klar:
- Istället för att använda JavaScript-händelser för att kontrollera om en sida har laddats, kan du också använda ladda HTML-attribut för samma resultat. Lägg till onload-attributet till body-taggen i din HTML-fil:
<kroppladda="i det()"> - Skapa i det() funktion i JavaScript-filen. Det rekommenderas inte att använda både onload HTML-attributet och onload JavaScript-händelsen samtidigt. Om du gör det kan det leda till oväntat beteende eller konflikter mellan de två funktionerna.
fungerai det() {
dokumentera.getElementById("produktion").innerHTML = "Sida laddad!";
}
Vi rekommenderar att du använder JavaScript-händelselyssnare och window.onload metod över HTML ladda attribut eftersom det är en bra praxis att hålla webbsidans beteende och innehåll åtskilda. Även JavaScript-händelselyssnare ger mer kompatibilitet och flexibilitet jämfört med de andra två metoderna.
Hur man använder onLoad med HTML-elementet Image
Du kan också använda onload-händelsen för att exekvera kod när andra element laddas på sidan. Ett exempel på detta är bildelementet.
- Lägg till valfri bild i samma mapp som din index.html-fil.
- Lägg till en bildtagg i HTML-filen och länka src-attributet till namnet på bilden som sparats i mappen.
<imgid="min bild"src="Pidgeymon.png"bredd="300"> - Lägg till ytterligare en tom stycketagg för att visa ett meddelande när bilden laddas:
<sidid="imageLoadedMessage">sid> - Lägg till en onload-händelse på bilden i JavaScript-filen. Använd det unika ID: t min bild för att bestämma vilket bildelement som ska läggas till onload-händelsen till:
var min bild = dokumentera.getElementById("min bild");
myImage.onload = fungera() {
}; - Inuti onload-händelsen ändrar du den inre HTML-koden för att lägga till Bilden har laddats meddelande:
dokumentera.getElementById("imageLoadedMessage").innerHTML = "Bilden laddad!"; - Istället för att använda myImage.onload, kan du också använda en evenemangslyssnare för att lyssna på ladda JavaScript-händelse:
myImage.addEventListener('ladda', fungera() {
dokumentera.getElementById("imageLoadedMessage").innerHTML = "Bilden laddad!";
}); - Öppna index.html i en webbläsare för att se bilden och meddelandet:
- För samma resultat kan du också använda onload HTML-attributet. I likhet med body-taggen, lägg till ett onload-attribut till img-taggen:
<imgid="min bild"src="Pidgeymon.png"bredd="300"ladda="imageLoaded()"> - Lägg till funktionen i JavaScript-filen för att exekvera koden när bilden har laddats:
fungeraimageLoaded() {
dokumentera.getElementById("imageLoadedMessage").innerHTML = "Bilden laddad!";
}
Så här använder du onLoad när du laddar JavaScript
Du kan använda HTML onload-attributet för att kontrollera om webbläsaren har laddat klart JavaScript-filen. Det finns ingen motsvarande JavaScript-onload-händelse för skripttaggen.
- Lägg till onload-attributet till skripttaggen i din HTML-fil.
<manussrc="script.js"ladda="LoadedJs()">manus> - Lägg till funktionen i din JavaScript-fil. Skriv ut ett meddelande av loggar till webbläsarkonsolen:
fungeraLoadedJs() {
trösta.logga("JS laddas av webbläsaren!");
} - Öppna filen index.html i webbläsaren. Du kan använd Chrome DevTools för att se alla meddelanden som matas ut i konsolen.
Laddar webbsidor i webbläsaren
Nu kan du använda funktioner och händelser för att exekvera viss kod när en webbsida har laddats färdigt. Att ladda sidor är en stor faktor för att skapa en smidig och sömlös användarupplevelse.
Du kan lära dig mer om hur du kan integrera mer intressanta design av laddningssidor på din webbplats.