Koncept HTML/JS onload vam lahko pomaga nadzorovati vedenje spletne strani, ko se naloži.

Nalaganje spletne strani vključuje čakanje, da se vsebina strani, slike in drugi viri popolnoma naložijo.

Nekatere spletne strani zagotavljajo, da se določene funkcije ne izvajajo, dokler se vse ne naloži. Primer vključuje pridobivanje podatkov iz baze podatkov šele potem, ko se stran naloži.

Ali je spletna stran v celoti naložena, lahko preverite na različne načine. Dogodke lahko poslušate z uporabo obdelovalcev dogodkov JavaScript, uporabite window.onload dogodek JavaScript ali onload HTML atribut.

Kako uporabljati onLoad z elementom HTML Body

Z dogodki JavaScript lahko preverite, ali se je telo spletne strani naložilo. Za izvedbo kode boste potrebovali datoteko HTML z nekaj vsebine strani in datoteko JavaScript.

Koda, uporabljena v tem projektu, je na voljo v a Repozitorij GitHub in je brezplačen za uporabo pod licenco MIT.

  1. V novi datoteki HTML, imenovani index.html, dodajte to osnovno kodo HTML:
    html>
    <html>
    <glavo>
    <naslov>Primer uporabe onloadnaslov>
    glavo>
    <telo>
    <h1>Primer uporabe onload()h1>
    <str>Ta primer prikazuje, kako uporabiti dogodek onload() v JavaScriptu.str>
    telo>
    html>
  2. Ustvarite novo datoteko v isti mapi z imenom script.js. Povežite to datoteko s svojo stranjo HTML z uporabo oznake skripta. Oznako skripta lahko dodate na dno oznake body:
    <telo>
     Vaša vsebina 
    <scenarijsrc="script.js">scenarij>
    telo>
  3. Znotraj vsebine v oznaki telesa HTML dodajte prazno oznako odstavka.
    <strid="izhod">str>
  4. Znotraj datoteke JavaScript dodajte window.onload funkcija dogodka. To se bo izvedlo, ko se stran naloži:
    okno.onload = funkcijo() {
    // koda za zagon, ko se stran naloži
    };
  5. Znotraj funkcije napolnite vsebino prazne oznake odstavka. To bo spremenilo oznako odstavka tako, da prikaže sporočilo samo, ko se stran naloži:
    dokument.getElementById("izhod").notranjiHTML = "Stran naložena!";
  6. Lahko pa tudi uporabite poslušalca dogodkov poslušati za DOMContentLoaded dogodek. DOMContentLoaded sproži prej kot window.onload. Sproži se takoj, ko je dokument HTML pripravljen, namesto da bi čakal, da se naložijo vsi zunanji viri.
    dokument.addEventListener('DOMContentLoaded', funkcijo() {
    dokument.getElementById("izhod").notranjiHTML = "Stran naložena!";
    });
  7. Odprite datoteko index.html v spletnem brskalniku, da si ogledate sporočilo, ko se stran konča z nalaganjem:
  8. Namesto uporabe dogodkov JavaScript za preverjanje, ali se je stran naložila, lahko uporabite tudi onload HTML atribut za isti rezultat. Dodajte atribut onload oznaki body v datoteki HTML:
    <teloonload="v()">
  9. Ustvarite v() funkcijo znotraj datoteke JavaScript. Ni priporočljivo, da hkrati uporabljate atribut HTML onload in dogodek JavaScript onload. To bi lahko povzročilo nepričakovano vedenje ali konflikte med obema funkcijama.
    funkcijov() {
    dokument.getElementById("izhod").notranjiHTML = "Stran naložena!";
    }

Priporočamo uporabo poslušalcev dogodkov JavaScript in window.onload metodo nad HTML onload ker je dobro, da sta vedenje in vsebina spletne strani ločena. Poleg tega poslušalci dogodkov JavaScript zagotavljajo več združljivosti in prilagodljivosti v primerjavi z drugima dvema metodama.

Kako uporabljati onLoad z elementom HTML slike

Dogodek onload lahko uporabite tudi za izvajanje kode, ko se na strani naložijo drugi elementi. Primer tega je slikovni element.

  1. V isto mapo kot vaša datoteka index.html dodajte poljubno sliko.
  2. Znotraj datoteke HTML dodajte slikovno oznako in povežite atribut src z imenom slike, shranjene v mapi.
    <imgid="moja slika"src="Pidgeymon.png"premer="300">
  3. Dodajte še eno prazno oznako odstavka za prikaz sporočila, ko se slika naloži:
    <strid="imageLoadedMessage">str>
  4. Znotraj datoteke JavaScript na sliko dodajte dogodek ob nalaganju. Uporabite edinstveni ID myImage da določite, kateremu slikovnemu elementu dodati dogodek onload:
    var moja slika = dokument.getElementById("moja slika");
    myImage.onload = funkcijo() {

    };
  5. Znotraj dogodka onload spremenite notranji HTML, da dodate Slika je naložena sporočilo:
    dokument.getElementById("imageLoadedMessage").notranjiHTML = "Slika je naložena!";
  6. Namesto uporabe myImage.onload, lahko za poslušanje uporabite tudi poslušalnik dogodkov obremenitev JavaScript dogodek:
    myImage.addEventListener('obremenitev', funkcijo() {
    dokument.getElementById("imageLoadedMessage").notranjiHTML = "Slika je naložena!";
    });
  7. Odprite index.html v spletnem brskalniku, da si ogledate sliko in sporočilo:
  8. Za enak rezultat lahko uporabite tudi atribut HTML onload. Podobno kot pri oznaki body dodajte atribut onload oznaki img:
    <imgid="moja slika"src="Pidgeymon.png"premer="300"onload="imageLoaded()">
  9. V datoteko JavaScript dodajte funkcijo za izvedbo kode, ko se slika naloži:
    funkcijoimageLoaded() {
    dokument.getElementById("imageLoadedMessage").notranjiHTML = "Slika je naložena!";
    }

Kako uporabljati onLoad pri nalaganju JavaScripta

Z atributom HTML onload lahko preverite, ali je brskalnik končal nalaganje datoteke JavaScript. Za oznako skripta ni enakovrednega dogodka ob nalaganju JavaScripta.

  1. Dodajte atribut onload oznaki skripta v datoteki HTML.
    <scenarijsrc="script.js"onload="LoadedJs()">scenarij>
  2. Dodajte funkcijo v datoteko JavaScript. Natisnite sporočilo do prijavo v konzolo brskalnika:
    funkcijoLoadedJs() {
    konzola.log("JS je naložil brskalnik!");
    }
  3. V brskalniku odprite datoteko index.html. Ti lahko uporabite Chrome DevTools za ogled vseh sporočil, izhodnih v konzolo.

Nalaganje spletnih strani v brskalnik

Zdaj lahko uporabite funkcije in dogodke za izvajanje določene kode, ko se spletna stran naloži. Nalaganje strani je velik dejavnik pri ustvarjanju gladke in brezhibne uporabniške izkušnje.

Izvedete lahko več o tem, kako lahko v svoje spletno mesto integrirate bolj zanimive dizajne strani za nalaganje.