HTML/JS-i laadimiskontseptsioon aitab teil kontrollida veebilehe käitumist pärast selle laadimist.

Veebilehe laadimine hõlmab lehe sisu, piltide ja muude ressursside täieliku laadimise ootamist.

Mõned veebilehed tagavad, et teatud funktsioonid ei tööta enne, kui kõik on laaditud. Näide hõlmab andmete toomist andmebaasist alles pärast lehe laadimist.

Veebilehe täielikku laadimist saate kontrollida mitmel viisil. Saate sündmusi kuulata JavaScripti sündmuste töötlejate abil, kasutage window.onload JavaScripti sündmus või laadimine HTML atribuut.

Kuidas onLoadi kasutada koos HTML-i põhielemendiga

JavaScripti sündmuste abil saate kontrollida, kas veebilehe keha on laaditud. Koodi käivitamiseks vajate HTML-faili koos lehe sisuga ja JavaScripti faili.

Selles projektis kasutatav kood on saadaval a GitHubi hoidla ja seda saate MIT-i litsentsi alusel tasuta kasutada.

  1. Uues HTML-failis nimega index.html, lisage järgmine põhiline HTML-kood:
    html>
    <html>
    <pea>
    <pealkiri>Näide sisselaadimise kasutamisestpealkiri
    




instagram viewer

    >
    pea>
    <keha>
    <h1>Näide onload() kasutamisesth1>
    <lk>See näide demonstreerib, kuidas kasutada JavaScriptis sündmust onload().lk>
    keha>
    html>
  2. Looge uus fail samasse kausta nimega script.js. Linkige see fail oma HTML-lehega skriptimärgendi abil. Saate lisada skriptimärgendi body-märgendi allossa.
    <keha>
     Teie sisu 
    <stsenaariumsrc="script.js">stsenaarium>
    keha>
  3. Lisage oma HTML-i body-märgendi sisu sisse tühi lõigumärgend.
    <lkid="väljund">lk>
  4. Lisage JavaScripti faili sisse window.onload sündmuse funktsioon. See käivitub, kui leht on laaditud:
    aken.onload = funktsiooni() {
    // kood, mis käivitatakse lehe laadimisel
    };
  5. Sisestage funktsiooni sees tühja lõigu märgendi sisu. See muudab lõigu märgendi kuvama sõnumi ainult siis, kui leht on laaditud:
    dokument.getElementById("väljund").innerHTML = "Leht laaditud!";
  6. Teise võimalusena saate ka kasutage sündmuste kuulajat kuulama DOMContentLoaded sündmus. DOMContentLoaded käivitub varem kui windows.onload. See käivitub kohe, kui HTML-dokument on valmis, mitte ei oota kõigi väliste ressursside laadimist.
    dokument.addEventListener('DOMContentLoaded', funktsiooni() {
    dokument.getElementById("väljund").innerHTML = "Leht laaditud!";
    });
  7. Avage veebibrauseris fail index.html, et vaadata sõnumit pärast lehe laadimist:
  8. Selle asemel, et kasutada JavaScripti sündmusi, et kontrollida, kas leht on laaditud, võite kasutada ka laadimine HTML atribuut sama tulemuse jaoks. Lisage oma HTML-faili kehamärgendile laadimisatribuut:
    <kehalaadimine="selles()">
  9. Looge selles() funktsioon JavaScripti faili sees. Ei ole soovitatav kasutada korraga nii atribuuti onload HTML kui ka onload JavaScripti sündmust. See võib põhjustada ootamatut käitumist või konflikte kahe funktsiooni vahel.
    funktsiooniselles() {
    dokument.getElementById("väljund").innerHTML = "Leht laaditud!";
    }

Soovitame kasutada JavaScripti sündmuste kuulajaid ja window.onload meetodit HTML-i asemel laadimine atribuut, sest veebilehe käitumise ja sisu lahus hoidmine on hea tava. Samuti pakuvad JavaScripti sündmuste kuulajad kahe ülejäänud meetodiga võrreldes rohkem ühilduvust ja paindlikkust.

Kuidas kasutada onLoadi pildi HTML-i elemendiga

Laadimissündmust saate kasutada ka koodi käivitamiseks, kui lehele laaditakse muid elemente. Selle näiteks on pildielement.

  1. Lisage mis tahes pilt failiga index.html samasse kausta.
  2. Lisage HTML-faili pildisilt ja linkige src atribuut kausta salvestatud pildi nimega.
    <imgid="minu pilt"src="Pidgeymon.png"laius="300">
  3. Lisage pildi laadimisel teate kuvamiseks veel üks tühi lõigumärgend:
    <lkid="imageLoadedMessage">lk>
  4. Lisage JavaScript-faili pildile laadimissündmus. Kasutage unikaalset ID-d minu pilt et määrata, millisele pildielemendile laadimissündmus lisada:
    var minu pilt = dokument.getElementById("minu pilt");
    myImage.onload = funktsiooni() {

    };
  5. Laadimissündmuse sees muutke sisemist HTML-i, et lisada Pilt on laaditud sõnum:
    dokument.getElementById("imageLoadedMessage").innerHTML = "Pilt laaditud!";
  6. Kasutamise asemel myImage.onload, saate kuulamiseks kasutada ka sündmuste kuulajat koormus JavaScripti sündmus:
    myImage.addEventListener('laadimine', funktsiooni() {
    dokument.getElementById("imageLoadedMessage").innerHTML = "Pilt laaditud!";
    });
  7. Pildi ja sõnumi vaatamiseks avage veebibrauseris index.html:
  8. Sama tulemuse saamiseks võite kasutada ka atribuuti onload HTML. Sarnaselt kehasildiga lisage img-sildile onload atribuut:
    <imgid="minu pilt"src="Pidgeymon.png"laius="300"laadimine="imageLoaded()">
  9. Lisage JavaScripti faili funktsioon koodi käivitamiseks, kui pilt on laaditud:
    funktsioonipilt Laaditud() {
    dokument.getElementById("imageLoadedMessage").innerHTML = "Pilt laaditud!";
    }

Kuidas kasutada onLoadi JavaScripti laadimisel

Saate kasutada atribuuti HTML onload, et kontrollida, kas brauser on JavaScripti faili laadimise lõpetanud. Skriptimärgendi jaoks pole samaväärset JavaScripti laadimissündmust.

  1. Lisage oma HTML-faili skriptimärgendile laadimisatribuut.
    <stsenaariumsrc="script.js"laadimine="LoadedJs()">stsenaarium>
  2. Lisage funktsioon oma JavaScripti faili. Trüki sõnum logige sisse brauseri konsooli:
    funktsiooniLoadedJs() {
    konsool.log("JS laadis brauser!");
    }
  3. Avage brauseris fail index.html. Sa saad kasutage Chrome DevToolsi konsooli väljastavate sõnumite vaatamiseks.

Veebilehtede laadimine brauseris

Nüüd saate kasutada funktsioone ja sündmusi teatud koodi käivitamiseks, kui veebileht on laaditud. Lehtede laadimine on sujuva ja sujuva kasutuskogemuse loomisel suur tegur.

Saate lisateavet selle kohta, kuidas integreerida oma veebisaidile huvitavamaid laadimislehtede kujundusi.