HTML/JS ielādes koncepcija var palīdzēt jums kontrolēt tīmekļa lapas darbību pēc tās ielādes.
Tīmekļa lapas ielāde ietver gaidīšanu, līdz tiek pilnībā ielādēts lapas saturs, attēli un citi resursi.
Dažas tīmekļa lapas nodrošina, ka noteikta funkcionalitāte nedarbojas, kamēr viss nav ielādēts. Piemērs ietver datu izgūšanu no datu bāzes tikai pēc lapas ielādes.
Ir dažādi veidi, kā pārbaudīt, vai tīmekļa lapa ir pilnībā ielādēta. Varat klausīties notikumus, izmantojot JavaScript notikumu apdarinātājus, izmantojiet window.onload JavaScript notikums vai ielāde HTML atribūts.
Kā lietot onLoad ar pamatteksta HTML elementu
Varat izmantot JavaScript notikumus, lai pārbaudītu, vai tīmekļa lapas pamatteksts ir ielādēts. Lai izpildītu kodu, jums būs nepieciešams HTML fails ar noteiktu lapas saturu un JavaScript fails.
Šajā projektā izmantotais kods ir pieejams a GitHub repozitorijs un to varat izmantot bez maksas saskaņā ar MIT licenci.
- Jaunā HTML failā ar nosaukumu index.html, pievienojiet šādu pamata HTML kodu:
html>
<html>
<galvu>
<virsraksts>Piemērs, izmantojot onloadvirsraksts>
galvu>
<ķermeni>
<h1>Piemērs, izmantojot onload()h1>
<lpp>Šis piemērs parāda, kā JavaScript izmantot notikumu onload().lpp>
ķermeni>
html> - Izveidojiet jaunu failu tajā pašā mapē ar nosaukumu script.js. Saistiet šo failu ar savu HTML lapu, izmantojot skripta tagu. Skripta tagu varat pievienot pamatteksta taga apakšā:
<ķermeni>
Jūsu saturs
<skriptssrc="script.js">skripts>
ķermeni> - HTML body taga saturam pievienojiet tukšu rindkopas tagu.
<lppid="izeja">lpp> - JavaScript failā pievienojiet window.onload notikuma funkcija. Tas tiks izpildīts, kad lapa būs ielādēta:
logs.ielādēt = funkciju() {
// kods, kas jāpalaiž, kad lapa ir ielādēta
}; - Funkcijas iekšpusē aizpildiet tukšās rindkopas taga saturu. Tas mainīs rindkopas tagu, lai parādītu ziņojumu tikai tad, kad lapa ir ielādēta:
dokumentu.getElementById("izeja").innerHTML = "Lapa ir ielādēta!"; - Alternatīvi, jūs varat arī izmantojiet notikumu klausītāju klausīties par DOMContentLoaded notikumu. DOMContentLoaded aktivizē agrāk nekā windows.onload. Tas tiek aktivizēts, tiklīdz HTML dokuments ir gatavs, nevis gaida visu ārējo resursu ielādi.
dokumentu.addEventListener("DOMContentLoaded", funkciju() {
dokumentu.getElementById("izeja").innerHTML = "Lapa ir ielādēta!";
}); - Tīmekļa pārlūkprogrammā atveriet failu index.html, lai skatītu ziņojumu, kad lapas ielāde ir pabeigta:
- Tā vietā, lai izmantotu JavaScript notikumus, lai pārbaudītu, vai lapa ir ielādēta, varat arī izmantot ielāde HTML atribūts tam pašam rezultātam. Pievienojiet ielādes atribūtu ķermeņa tagam savā HTML failā:
<ķermeniielāde="tajā()"> - Izveidojiet tajā() funkcija JavaScript failā. Nav ieteicams vienlaikus izmantot gan onload HTML atribūtu, gan onload JavaScript notikumu. Šāda rīcība var izraisīt neparedzētu rīcību vai konfliktus starp abām funkcijām.
funkcijutajā() {
dokumentu.getElementById("izeja").innerHTML = "Lapa ir ielādēta!";
}
Mēs iesakām izmantot JavaScript notikumu uztvērējus un window.onload metodi, nevis HTML ielāde atribūtu, jo laba prakse ir nošķirt tīmekļa lapas darbību un saturu. Arī JavaScript notikumu klausītāji nodrošina lielāku saderību un elastību salīdzinājumā ar pārējām divām metodēm.
Kā lietot onLoad ar attēla HTML elementu
Varat arī izmantot ielādes notikumu, lai izpildītu kodu, kad lapā tiek ielādēti citi elementi. Piemērs tam ir attēla elements.
- Pievienojiet jebkuru attēlu tajā pašā mapē, kurā atrodas fails index.html.
- HTML failā pievienojiet attēla tagu un saistiet atribūtu src ar mapē saglabātā attēla nosaukumu.
<imgid="mans attēls"src="Pidgeymon.png"platums="300"> - Pievienojiet vēl vienu tukšu rindkopas tagu, lai parādītu ziņojumu, kad attēls tiek ielādēts:
<lppid="imageLoadedMessage">lpp> - JavaScript failā pievienojiet attēlam ielādes notikumu. Izmantojiet unikālo ID mans attēls lai noteiktu, kuram attēla elementam pievienot ielādes notikumu:
var mans attēls = dokumentu.getElementById("mans attēls");
myImage.onload = funkciju() {
}; - Ielādes notikumā mainiet iekšējo HTML, lai pievienotu Attēls ir ielādēts ziņa:
dokumentu.getElementById("imageLoadedMessage").innerHTML = "Attēls ir ielādēts!"; - Tā vietā, lai izmantotu myImage.onload, varat arī izmantot notikumu klausītāju, lai klausītos slodze JavaScript notikums:
myImage.addEventListener('slodze', funkciju() {
dokumentu.getElementById("imageLoadedMessage").innerHTML = "Attēls ir ielādēts!";
}); - Tīmekļa pārlūkprogrammā atveriet index.html, lai skatītu attēlu un ziņojumu:
- Lai iegūtu tādu pašu rezultātu, varat izmantot arī onload HTML atribūtu. Līdzīgi kā body tag, img tagam pievienojiet onload atribūtu:
<imgid="mans attēls"src="Pidgeymon.png"platums="300"ielāde="imageLoaded()"> - Pievienojiet funkciju JavaScript failā, lai izpildītu kodu, kad attēls ir ielādēts:
funkcijuattēls Ielādēts() {
dokumentu.getElementById("imageLoadedMessage").innerHTML = "Attēls ir ielādēts!";
}
Kā lietot onLoad, ielādējot JavaScript
Varat izmantot atribūtu HTML onload, lai pārbaudītu, vai pārlūkprogramma ir pabeigusi JavaScript faila ielādi. Skripta tagam nav līdzvērtīga JavaScript ielādes notikuma.
- Pievienojiet ielādes atribūtu skripta tagam savā HTML failā.
<skriptssrc="script.js"ielāde="LoadedJs()">skripts> - Pievienojiet funkciju savam JavaScript failam. Izdrukājiet ziņojumu, izmantojot piesakoties pārlūkprogrammas konsolē:
funkcijuLoadedJs() {
konsole.log("JS ielādēja pārlūkprogramma!");
} - Pārlūkprogrammā atveriet failu index.html. Jūs varat izmantojiet Chrome DevTools lai skatītu visus ziņojumus, kas tiek izvadīti konsolē.
Tīmekļa lapu ielāde pārlūkprogrammā
Tagad varat izmantot funkcijas un notikumus, lai izpildītu noteiktu kodu, kad tīmekļa lapas ielāde ir pabeigta. Lapu ielāde ir svarīgs faktors, lai radītu vienmērīgu un nevainojamu lietotāja pieredzi.
Varat uzzināt vairāk par to, kā savā vietnē integrēt interesantākus ielādes lapu dizainus.
