Koncept HTML/JS onload vám môže pomôcť kontrolovať správanie webovej stránky po jej načítaní.

Načítanie webovej stránky zahŕňa čakanie na úplné načítanie obsahu stránky, obrázkov a iných zdrojov.

Niektoré webové stránky zaisťujú, že určité funkcie sa nevyskytnú, kým sa všetko nenačíta. Príkladom je získavanie údajov z databázy až po načítaní stránky.

Existujú rôzne spôsoby, ako môžete skontrolovať, či je webová stránka úplne načítaná. Udalosti si môžete vypočuť pomocou obslužných programov JavaScriptu, použite okno.načítať JavaScript udalosť, alebo načítať HTML atribút.

Ako používať onLoad s prvkom HTML Body

Ak chcete skontrolovať, či sa načítalo telo webovej stránky, môžete použiť udalosti JavaScript. Na spustenie kódu budete potrebovať súbor HTML s určitým obsahom stránky a súbor JavaScript.

Kód použitý v tomto projekte je dostupný v a úložisko GitHub a môžete ho bezplatne používať na základe licencie MIT.

  1. V novom súbore HTML s názvom index.html, pridajte nasledujúci základný HTML kód:
    html
    




instagram viewer

    >
    <html>
    <hlavu>
    <titul>Príklad s použitím onloadtitul>
    hlavu>
    <telo>
    <h1>Príklad použitia onload()h1>
    <p>Tento príklad ukazuje, ako použiť udalosť onload() v JavaScripte.p>
    telo>
    html>
  2. Vytvorte nový súbor v rovnakom priečinku s názvom script.js. Prepojte tento súbor so svojou stránkou HTML pomocou značky skriptu. Značku skriptu môžete pridať do spodnej časti značky body:
    <telo>
     Váš obsah 
    <skriptsrc="script.js">skript>
    telo>
  3. Do obsahu značky tela HTML pridajte prázdnu značku odseku.
    <pid="výkon">p>
  4. Do súboru JavaScript pridajte okno.načítať funkcia udalosti. Toto sa spustí, keď sa stránka načíta:
    okno.onload = funkciu() {
    // kód, ktorý sa spustí pri načítaní stránky
    };
  5. Vo vnútri funkcie vyplňte obsah prázdnej značky odseku. Týmto sa zmení značka odseku tak, aby sa správa zobrazovala iba vtedy, keď sa stránka načítala:
    dokument.getElementById("výkon").vnútornéHTML = "Stránka načítaná!";
  6. Prípadne môžete tiež použite poslucháč udalostí počúvať pre DOMContentLoaded udalosť. DOMContentLoaded spúšťa skôr ako window.onload. Spustí sa hneď, ako je dokument HTML pripravený, namiesto čakania na načítanie všetkých externých zdrojov.
    dokument.addEventListener(„DOMContentLoaded“, funkciu() {
    dokument.getElementById("výkon").vnútornéHTML = "Stránka načítaná!";
    });
  7. Otvorte súbor index.html vo webovom prehliadači, aby ste zobrazili správu po dokončení načítania stránky:
  8. Namiesto použitia udalostí JavaScript na kontrolu, či sa stránka načítala, môžete použiť aj načítať HTML atribút pre rovnaký výsledok. Pridajte atribút onload do značky body vo svojom súbore HTML:
    <telonačítať="init()">
  9. Vytvorte init() funkciu v súbore JavaScript. Neodporúča sa používať súčasne atribút onload HTML a udalosť onload JavaScript. Mohlo by to viesť k neočakávanému správaniu alebo konfliktom medzi týmito dvoma funkciami.
    funkciuinit() {
    dokument.getElementById("výkon").vnútornéHTML = "Stránka načítaná!";
    }

Odporúčame použiť poslucháče udalostí JavaScript a okno.načítať metóda cez HTML načítať atribút, pretože oddeliť správanie a obsah webovej stránky je dobrým postupom. Prijímače udalostí JavaScript tiež poskytujú väčšiu kompatibilitu a flexibilitu v porovnaní s ostatnými dvoma metódami.

Ako používať onLoad s prvkom HTML obrázka

Udalosť onload môžete použiť aj na spustenie kódu, keď sa na stránke načítajú iné prvky. Príkladom toho je prvok obrazu.

  1. Do rovnakého priečinka ako váš súbor index.html pridajte ľubovoľný obrázok.
  2. Do súboru HTML pridajte značku obrázka a prepojte atribút src s názvom obrázka uloženého v priečinku.
    <imgid="môj obrázok"src="Pidgeymon.png"šírka="300">
  3. Pridajte ďalšiu prázdnu značku odseku na zobrazenie správy pri načítaní obrázka:
    <pid="imageLoadedMessage">p>
  4. Do súboru JavaScript pridajte na obrázok udalosť onload. Použite jedinečné ID myImage určiť, do ktorého prvku obrázka sa má pridať udalosť onload:
    var môjObrázok = dokument.getElementById("môj obrázok");
    myImage.onload = funkciu() {

    };
  5. V rámci udalosti onload zmeňte vnútorný kód HTML na pridanie Obrázok sa načítal správa:
    dokument.getElementById("imageLoadedMessage").vnútornéHTML = "Obrázok načítaný!";
  6. Namiesto použitia myImage.onload, môžete tiež použiť na počúvanie udalosti naložiť Udalosť JavaScript:
    myImage.addEventListener('naložiť', funkciu() {
    dokument.getElementById("imageLoadedMessage").vnútornéHTML = "Obrázok načítaný!";
    });
  7. Ak chcete zobraziť obrázok a správu, otvorte index.html vo webovom prehliadači:
  8. Pre rovnaký výsledok môžete použiť aj atribút onload HTML. Podobne ako v prípade značky body pridajte do značky img atribút onload:
    <imgid="môj obrázok"src="Pidgeymon.png"šírka="300"načítať="imageLoaded()">
  9. Pridajte funkciu do súboru JavaScript na spustenie kódu po načítaní obrázka:
    funkciuimageLoaded() {
    dokument.getElementById("imageLoadedMessage").vnútornéHTML = "Obrázok načítaný!";
    }

Ako používať onLoad pri načítavaní JavaScriptu

Ak chcete skontrolovať, či prehliadač dokončil načítanie súboru JavaScript, môžete použiť atribút HTML onload. Pre značku skriptu neexistuje žiadna ekvivalentná udalosť JavaScript onload.

  1. Pridajte atribút onload do značky skriptu v súbore HTML.
    <skriptsrc="script.js"načítať="LoadedJs()">skript>
  2. Pridajte funkciu do svojho súboru JavaScript. Vytlačte správu od prihlásenie do konzoly prehliadača:
    funkciuLoadedJs() {
    konzoly.log("JS načítané prehliadačom!");
    }
  3. V prehliadači otvorte súbor index.html. Môžeš použite Chrome DevTools na zobrazenie všetkých výstupov správ do konzoly.

Načítavanie webových stránok v prehliadači

Teraz môžete použiť funkcie a udalosti na spustenie určitého kódu po dokončení načítania webovej stránky. Načítanie stránok je veľkým faktorom pri vytváraní plynulého a bezproblémového používateľského zážitku.

Môžete sa dozvedieť viac o tom, ako môžete do svojho webu integrovať zaujímavejšie návrhy načítavacích stránok.