HTML/JS-latauskonsepti voi auttaa sinua hallitsemaan verkkosivun toimintaa sen latautumisen jälkeen.
Verkkosivun lataaminen sisältää odottamisen, että sivun sisältö, kuvat ja muut resurssit latautuvat kokonaan.
Jotkut verkkosivut varmistavat, että tietyt toiminnot eivät toimi ennen kuin kaikki on latautunut. Esimerkki sisältää tietojen hakemisen tietokannasta vasta sivun latautumisen jälkeen.
Voit tarkistaa eri tavoilla, onko verkkosivu ladattu täyteen. Voit kuunnella tapahtumia JavaScript-tapahtumakäsittelijöiden avulla, käytä window.onload JavaScript-tapahtuma tai lastina HTML-attribuutti.
OnLoadin käyttäminen Body HTML -elementin kanssa
JavaScript-tapahtumien avulla voit tarkistaa, onko verkkosivun runko latautunut. Tarvitset HTML-tiedoston, joka sisältää jonkin verran sivun sisältöä, ja JavaScript-tiedoston koodin suorittamiseen.
Tässä projektissa käytetty koodi on saatavilla a GitHub-arkisto ja sen käyttö on ilmaista MIT-lisenssin alaisena.
- Uudessa HTML-tiedostossa nimeltä index.html, lisää seuraava HTML-peruskoodi:
html>
<html>
<pää>
<otsikko>Esimerkki latauslatauksestaotsikko>
pää>
<kehon>
<h1>Esimerkki komennolla onload()h1>
<s>Tämä esimerkki osoittaa, kuinka onload()-tapahtumaa käytetään JavaScriptissä.s>
kehon>
html> - Luo uusi tiedosto samaan kansioon nimeltä script.js. Linkitä tämä tiedosto HTML-sivullesi komentosarjatunnisteen avulla. Voit lisätä komentosarjatunnisteen body-tagin alaosaan:
<kehon>
Sinun sisältösi
<käsikirjoitussrc="script.js">käsikirjoitus>
kehon> - Lisää tyhjä kappaletagi HTML-tekstitunnisteen sisältöön.
<sid="lähtö">s> - Lisää JavaScript-tiedoston sisään window.onload tapahtumatoiminto. Tämä suoritetaan, kun sivu on latautunut:
ikkuna.onload = toiminto() {
// koodi, joka suoritetaan, kun sivu ladataan
}; - Täytä funktion sisällä tyhjän kappaletunnisteen sisältö. Tämä muuttaa kappaletunnisteen näyttämään viestin vain, kun sivu on ladattu:
asiakirja.getElementById("lähtö").innerHTML = "Sivu ladattu!"; - Vaihtoehtoisesti voit myös käytä tapahtumakuuntelijaa kuuntelemaan DOMContentLoaded tapahtuma. DOMContentLoaded laukeaa aikaisemmin kuin windows.onload. Se käynnistyy heti, kun HTML-dokumentti on valmis, sen sijaan, että odottaisi kaikkien ulkoisten resurssien latautumista.
asiakirja.addEventListener("DOMContentLoaded", toiminto() {
asiakirja.getElementById("lähtö").innerHTML = "Sivu ladattu!";
}); - Avaa index.html-tiedosto verkkoselaimessa nähdäksesi viestin, kun sivu on latautunut:
- Sen sijaan, että käyttäisit JavaScript-tapahtumia sivun latautumisen tarkistamiseen, voit myös käyttää lastina HTML-attribuutti samalle tulokselle. Lisää latausattribuutti HTML-tiedostosi body-tunnisteeseen:
<kehonlastina="sen sisällä()"> - Luo sen sisällä() toiminto JavaScript-tiedoston sisällä. Ei ole suositeltavaa käyttää samanaikaisesti onload HTML -attribuuttia ja onload JavaScript -tapahtumaa. Tämä voi johtaa odottamattomaan toimintaan tai ristiriitaan näiden kahden toiminnon välillä.
toimintosen sisällä() {
asiakirja.getElementById("lähtö").innerHTML = "Sivu ladattu!";
}
Suosittelemme käyttämään JavaScript-tapahtumakuuntelijoita ja window.onload menetelmää HTML: n päälle lastina attribuuttia, koska verkkosivun toiminnan ja sisällön pitäminen erillään on hyvä käytäntö. JavaScript-tapahtuman kuuntelijat tarjoavat myös enemmän yhteensopivuutta ja joustavuutta kahteen muuhun menetelmään verrattuna.
OnLoadin käyttäminen Image HTML -elementin kanssa
Voit myös käyttää lataustapahtumaa koodin suorittamiseen, kun sivulle latautuu muita elementtejä. Esimerkki tästä on kuvaelementti.
- Lisää mikä tahansa kuva samaan kansioon kuin index.html-tiedostosi.
- Lisää HTML-tiedoston sisään kuvatunniste ja linkitä src-attribuutti kansioon tallennetun kuvan nimeen.
<imgid="minun kuvani"src="Pidgeymon.png"leveys="300"> - Lisää toinen tyhjä kappaletunniste näyttääksesi viestin, kun kuva latautuu:
<sid="imageLoadedMessage">s> - Lisää JavaScript-tiedoston sisään lataustapahtuma kuvaan. Käytä yksilöllistä tunnusta myImage määrittääksesi, mihin kuvaelementtiin lataustapahtuma lisätään:
var minun kuva = asiakirja.getElementById("minun kuvani");
myImage.onload = toiminto() {
}; - Muuta lataustapahtuman sisällä sisäinen HTML-koodi lisätäksesi Kuva ladattu viesti:
asiakirja.getElementById("imageLoadedMessage").innerHTML = "Kuva ladattu!"; - Käyttämisen sijaan myImage.onload, voit myös käyttää tapahtumakuuntelijaa kuunnellaksesi ladata JavaScript-tapahtuma:
myImage.addEventListener('ladata', toiminto() {
asiakirja.getElementById("imageLoadedMessage").innerHTML = "Kuva ladattu!";
}); - Avaa index.html verkkoselaimessa nähdäksesi kuvan ja viestin:
- Saman tuloksen saamiseksi voit myös käyttää onload HTML -attribuuttia. Kuten body-tunnisteessa, lisää img-tunnisteeseen onload-attribuutti:
<imgid="minun kuvani"src="Pidgeymon.png"leveys="300"lastina="imageLoaded()"> - Lisää JavaScript-tiedostoon funktio, joka suorittaa koodin, kun kuva on ladattu:
toimintokuva Ladattu() {
asiakirja.getElementById("imageLoadedMessage").innerHTML = "Kuva ladattu!";
}
OnLoadin käyttäminen JavaScriptiä ladattaessa
Voit käyttää HTML onload -attribuuttia tarkistaaksesi, onko selain lopettanut JavaScript-tiedoston lataamisen. Komentosarjatunnisteelle ei ole vastaavaa JavaScriptin lataustapahtumaa.
- Lisää latausattribuutti HTML-tiedostosi komentosarjatunnisteeseen.
<käsikirjoitussrc="script.js"lastina="LoadedJs()">käsikirjoitus> - Lisää funktio JavaScript-tiedostoosi. Tulosta viesti kirjautuminen selainkonsoliin:
toimintoLoadedJs() {
konsoli.Hirsi("JS lataa selain!");
} - Avaa index.html-tiedosto selaimessa. Sinä pystyt käytä Chrome DevToolsia nähdäksesi kaikki konsoliin tulevat viestit.
Ladataan verkkosivuja selaimessa
Nyt voit käyttää toimintoja ja tapahtumia tietyn koodin suorittamiseen, kun verkkosivu on latautunut. Sivujen lataaminen on suuri tekijä sujuvan ja saumattoman käyttökokemuksen luomisessa.
Saat lisätietoja siitä, kuinka voit integroida mielenkiintoisempia lataussivumalleja verkkosivustollesi.