HTML/JS onload koncept može vam pomoći da kontrolirate ponašanje web stranice nakon što se učita.
Učitavanje web stranice uključuje čekanje da se sadržaj stranice, slike i drugi resursi potpuno učitaju.
Neke web-stranice osiguravaju da se određene funkcije ne pojavljuju dok se sve ne učita. Primjer uključuje dohvaćanje podataka iz baze podataka tek nakon što se stranica učita.
Postoje različiti načini na koje možete provjeriti je li web stranica u potpunosti učitana. Možete slušati događaje pomoću JavaScript rukovatelja događajima, koristite prozor.onload JavaScript događaj ili onload HTML atribut.
Kako koristiti onLoad s HTML elementom tijela
Možete koristiti JavaScript događaje da provjerite je li tijelo web-stranice učitano. Za izvođenje koda trebat će vam HTML datoteka s nekim sadržajem stranice i JavaScript datoteka.
Kod korišten u ovom projektu dostupan je u a GitHub spremište i besplatan je za korištenje pod MIT licencom.
- U novoj HTML datoteci tzv index.html, dodajte sljedeći osnovni HTML kôd:
html>
<html>
<glava>
<titula>Primjer korištenja onloadtitula>
glava>
<tijelo>
<h1>Primjer korištenja onload()h1>
<str>Ovaj primjer pokazuje kako koristiti događaj onload() u JavaScriptu.str>
tijelo>
html> - Stvorite novu datoteku u istoj mapi pod nazivom skripta.js. Povežite ovu datoteku sa svojom HTML stranicom pomoću oznake skripte. Oznaku skripte možete dodati na dno oznake tijela:
<tijelo>
Vaš sadržaj
<skriptasrc="script.js">skripta>
tijelo> - Unutar sadržaja u HTML oznaci tijela dodajte praznu oznaku odlomka.
<striskaznica="izlaz">str> - Unutar JavaScript datoteke dodajte prozor.onload funkcija događaja. Ovo će se izvršiti kada se stranica učita:
prozor.onload = funkcija() {
// kod koji se pokreće kada se stranica učita
}; - Unutar funkcije popunite sadržaj prazne oznake odlomka. Ovo će promijeniti oznaku odlomka tako da prikazuje poruku samo kada se stranica učita:
dokument.getElementById("izlaz").unutarnjiHTML = "Stranica učitana!"; - Alternativno, također možete koristite slušatelja događaja slušati za DOMContentLoaded događaj. DOMContentLoaded pokreće ranije od window.onload. Pokreće se čim je HTML dokument spreman, umjesto da se čeka da se učitaju svi vanjski resursi.
dokument.addEventListener('DOMContentLoaded', funkcija() {
dokument.getElementById("izlaz").unutarnjiHTML = "Stranica učitana!";
}); - Otvorite datoteku index.html u web pregledniku kako biste vidjeli poruku kada se stranica završi s učitavanjem:
- Umjesto korištenja JavaScript događaja za provjeru je li se stranica učitala, također možete koristiti onload HTML atribut za isti rezultat. Dodajte atribut onload oznaci tijela u vašoj HTML datoteci:
<tijeloonload="u tome()"> - Stvorite u tome() unutar JavaScript datoteke. Ne preporučuje se istovremeno koristiti onload HTML atribut i onload JavaScript događaj. To bi moglo dovesti do neočekivanog ponašanja ili sukoba između dviju funkcija.
funkcijau tome() {
dokument.getElementById("izlaz").unutarnjiHTML = "Stranica učitana!";
}
Preporučujemo korištenje JavaScript slušatelja događaja i prozor.onload metoda preko HTML-a onload jer je držanje ponašanja i sadržaja web stranice odvojenim dobra praksa. Također, JavaScript slušatelji događaja pružaju veću kompatibilnost i fleksibilnost u odnosu na druge dvije metode.
Kako koristiti onLoad s HTML elementom slike
Također možete koristiti onload događaj za izvršavanje koda kada se drugi elementi učitavaju na stranici. Primjer za to je element slike.
- Unutar iste mape u kojoj je vaša datoteka index.html dodajte bilo koju sliku.
- Unutar HTML datoteke dodajte oznaku slike i povežite atribut src s nazivom slike spremljene u mapi.
<imgiskaznica="moja slika"src="Pidgeymon.png"širina="300"> - Dodajte još jednu praznu oznaku odlomka za prikaz poruke kada se slika učita:
<striskaznica="imageLoadedMessage">str> - Unutar JavaScript datoteke dodajte događaj učitavanja na sliku. Koristite jedinstveni ID myImage da biste odredili kojem elementu slike dodati događaj onload:
var moja slika = dokument.getElementById("moja slika");
myImage.onload = funkcija() {
}; - Unutar događaja onload promijenite unutarnji HTML da biste dodali Slika je učitana poruka:
dokument.getElementById("imageLoadedMessage").unutarnjiHTML = "Slika je učitana!"; - Umjesto korištenja myImage.onload, također možete koristiti slušatelja događaja za slušanje opterećenje JavaScript događaj:
myImage.addEventListener('opterećenje', funkcija() {
dokument.getElementById("imageLoadedMessage").unutarnjiHTML = "Slika je učitana!";
}); - Otvorite index.html u web pregledniku da vidite sliku i poruku:
- Za isti rezultat možete koristiti i onload HTML atribut. Slično oznaci tijela, dodajte atribut onload oznaci img:
<imgiskaznica="moja slika"src="Pidgeymon.png"širina="300"onload="imageLoaded()"> - Dodajte funkciju u JavaScript datoteci za izvršavanje koda kada se slika učita:
funkcijaimageLoaded() {
dokument.getElementById("imageLoadedMessage").unutarnjiHTML = "Slika je učitana!";
}
Kako koristiti onLoad prilikom učitavanja JavaScripta
Možete koristiti HTML onload atribut da provjerite je li preglednik završio s učitavanjem JavaScript datoteke. Ne postoji ekvivalentni događaj učitavanja JavaScripta za oznaku skripte.
- Dodajte atribut onload oznaci skripte u svojoj HTML datoteci.
<skriptasrc="script.js"onload="LoadedJs()">skripta> - Dodajte funkciju u svoju JavaScript datoteku. Ispiši poruku do prijavljivanje na konzolu preglednika:
funkcijaLoadedJs() {
konzola.log("JS učitao preglednik!");
} - Otvorite datoteku index.html u pregledniku. Možeš koristiti Chrome DevTools za pregled svih poruka koje izlaze u konzolu.
Učitavanje web stranica u preglednik
Sada možete koristiti funkcije i događaje za izvršavanje određenog koda kada se web-stranica završi s učitavanjem. Učitavanje stranica veliki je faktor u stvaranju glatkog i besprijekornog korisničkog iskustva.
Možete saznati više o tome kako možete integrirati zanimljivije dizajne stranica za učitavanje u svoju web stranicu.
