HTML/JS įkėlimo koncepcija gali padėti kontroliuoti tinklalapio veikimą, kai jis įkeliamas.

Tinklalapio įkėlimas apima laukimą, kol bus visiškai įkeltas puslapio turinys, vaizdai ir kiti ištekliai.

Kai kurie tinklalapiai užtikrina, kad tam tikros funkcijos neveiktų tol, kol viskas nebus įkelta. Pavyzdys apima duomenų gavimą iš duomenų bazės tik įkėlus puslapį.

Yra įvairių būdų, kaip patikrinti, ar tinklalapis visiškai įkeltas. Galite klausytis įvykių naudodami „JavaScript“ įvykių tvarkykles, naudokite langas.atsiuntimas „JavaScript“ įvykis arba įkėlimas HTML atributas.

Kaip naudoti onLoad su Body HTML elementu

Norėdami patikrinti, ar tinklalapio turinys įkeltas, galite naudoti „JavaScript“ įvykius. Norint vykdyti kodą, jums reikės HTML failo su tam tikru puslapio turiniu ir JavaScript failo.

Šiame projekte naudojamas kodas yra a GitHub saugykla ir jūs galite nemokamai naudotis pagal MIT licenciją.

  1. Naujame HTML faile, pavadintame index.html, pridėkite šį pagrindinį HTML kodą:
    html>
    <html>
    <galva>
    




instagram viewer

    

    <titulą>Pavyzdys naudojant įkrovimątitulą>
    galva>
    <kūnas>
    <h1>Pavyzdys naudojant onload()h1>
    <p>Šiame pavyzdyje parodyta, kaip JavaScript naudoti įvykį onload().p>
    kūnas>
    html>
  2. Sukurkite naują failą tame pačiame aplanke pavadinimu script.js. Susiekite šį failą su savo HTML puslapiu naudodami scenarijaus žymą. Scenarijaus žymą galite pridėti teksto žymos apačioje:
    <kūnas>
     Jūsų turinys 
    <scenarijussrc="script.js">scenarijus>
    kūnas>
  3. HTML turinio žymos turinyje pridėkite tuščią pastraipos žymą.
    <pid="išvestis">p>
  4. „JavaScript“ faile pridėkite langas.atsiuntimas įvykio funkcija. Tai bus vykdoma, kai puslapis bus įkeltas:
    langas.įkelti = funkcija() {
    // kodas, kuris bus paleistas įkeliant puslapį
    };
  5. Funkcijos viduje užpildykite tuščios pastraipos žymos turinį. Tai pakeis pastraipos žymą, kad pranešimas būtų rodomas tik tada, kai puslapis bus įkeltas:
    dokumentas.getElementById("išvestis").innerHTML = "Puslapis įkeltas!";
  6. Arba taip pat galite naudoti įvykių klausytoją klausytis DOMContentLoaded įvykis. DOMContentLoaded suveikia anksčiau nei windows.onload. Jis suaktyvinamas, kai tik HTML dokumentas yra paruoštas, o ne laukiama, kol bus įkelti visi išoriniai ištekliai.
    dokumentas.addEventListener(„DOMContentLoaded“, funkcija() {
    dokumentas.getElementById("išvestis").innerHTML = "Puslapis įkeltas!";
    });
  7. Atidarykite failą index.html žiniatinklio naršyklėje, kad peržiūrėtumėte pranešimą, kai puslapis bus baigtas įkelti:
  8. Užuot naudoję „JavaScript“ įvykius, kad patikrintumėte, ar puslapis įkeltas, taip pat galite naudoti įkėlimas HTML atributas tam pačiam rezultatui. Pridėkite įkėlimo atributą prie kūno žymos HTML faile:
    <kūnasįkėlimas="init ()">
  9. Sukurti init () funkcija JavaScript faile. Nerekomenduojama vienu metu naudoti ir įkėlimo HTML atributo, ir įkėlimo JavaScript įvykio. Tai gali sukelti netikėtą elgesį arba konfliktą tarp dviejų funkcijų.
    funkcijainit() {
    dokumentas.getElementById("išvestis").innerHTML = "Puslapis įkeltas!";
    }

Rekomenduojame naudoti „JavaScript“ įvykių klausytojus ir langas.atsiuntimas metodą per HTML įkėlimas atributas, nes gera praktika yra atskirti tinklalapio veikimą ir turinį. Be to, „JavaScript“ įvykių klausytojai suteikia daugiau suderinamumo ir lankstumo, palyginti su kitais dviem metodais.

Kaip naudoti onLoad su vaizdo HTML elementu

Taip pat galite naudoti įkėlimo įvykį, kad vykdytumėte kodą, kai į puslapį įkeliami kiti elementai. To pavyzdys yra vaizdo elementas.

  1. Tame pačiame aplanke kaip ir failas index.html pridėkite bet kokį vaizdą.
  2. HTML faile pridėkite vaizdo žymą ir susiekite src atributą su aplanke išsaugoto vaizdo pavadinimu.
    <imgid="mano vaizdas"src="Pidgeymon.png"plotis="300">
  3. Pridėkite kitą tuščią pastraipos žymą, kad būtų rodomas pranešimas, kai vaizdas įkeliamas:
    <pid="imageLoadedMessage">p>
  4. „JavaScript“ faile pridėkite vaizdo įkėlimo įvykį. Naudokite unikalų ID mano vaizdas nustatyti, prie kurio vaizdo elemento pridėti įkėlimo įvykį:
    var mano vaizdas = dokumentas.getElementById("mano vaizdas");
    myImage.onload = funkcija() {

    };
  5. Įkėlimo įvykyje pakeiskite vidinį HTML, kad pridėtumėte Vaizdas įkeltas žinutė:
    dokumentas.getElementById("imageLoadedMessage").innerHTML = "Vaizdas įkeltas!";
  6. Užuot vartoję myImage.onload, taip pat galite naudoti įvykių klausytoją, kad galėtumėte klausytis apkrova „JavaScript“ įvykis:
    myImage.addEventListener('pakrauti', funkcija() {
    dokumentas.getElementById("imageLoadedMessage").innerHTML = "Vaizdas įkeltas!";
    });
  7. Norėdami peržiūrėti vaizdą ir pranešimą, žiniatinklio naršyklėje atidarykite index.html:
  8. Norėdami gauti tą patį rezultatą, taip pat galite naudoti įkėlimo HTML atributą. Panašiai kaip ir kūno žymoje, prie img žymos pridėkite įkėlimo atributą:
    <imgid="mano vaizdas"src="Pidgeymon.png"plotis="300"įkėlimas="imageLoaded()">
  9. Į „JavaScript“ failą pridėkite funkciją, kad būtų paleistas kodas, kai vaizdas įkeltas:
    funkcijavaizdas įkeltas() {
    dokumentas.getElementById("imageLoadedMessage").innerHTML = "Vaizdas įkeltas!";
    }

Kaip naudoti „onLoad“ įkeliant „JavaScript“.

Galite naudoti HTML įkėlimo atributą, kad patikrintumėte, ar naršyklė baigė įkelti JavaScript failą. Scenarijaus žymai nėra lygiaverčio „JavaScript“ įkėlimo įvykio.

  1. Pridėkite įkėlimo atributą prie scenarijaus žymos HTML faile.
    <scenarijussrc="script.js"įkėlimas="LoadedJs()">scenarijus>
  2. Pridėkite funkciją prie savo „JavaScript“ failo. Atspausdinti pranešimą iki prisijungimas prie naršyklės konsolės:
    funkcijaLoadedJs() {
    konsolė.log("JS įkėlė naršyklė!");
    }
  3. Naršyklėje atidarykite failą index.html. Tu gali naudoti Chrome DevTools norėdami peržiūrėti visus pranešimus, išvestus į konsolę.

Tinklalapių įkėlimas į naršyklę

Dabar galite naudoti funkcijas ir įvykius, kad vykdytumėte tam tikrą kodą, kai tinklalapis bus įkeltas. Puslapių įkėlimas yra svarbus veiksnys kuriant sklandžią ir sklandžią vartotojo patirtį.

Galite sužinoti daugiau apie tai, kaip į savo svetainę integruoti įdomesnius įkėlimo puslapių dizainus.