Koncept HTML/JS onload vám může pomoci řídit chování webové stránky po jejím načtení.

Načítání webové stránky zahrnuje čekání na úplné načtení obsahu stránky, obrázků a dalších zdrojů.

Některé webové stránky zajišťují, že určité funkce se nespustí, dokud se vše nedokončí načítání. Příkladem je načítání dat z databáze až po načtení stránky.

Existují různé způsoby, jak zkontrolovat, zda je webová stránka plně načtena. Události můžete poslouchat pomocí obslužných rutin událostí JavaScript, použijte okno.načtení JavaScript událost, nebo načíst HTML atribut.

Jak používat onLoad s prvkem HTML Body

Pomocí událostí JavaScriptu můžete zkontrolovat, zda se načetlo tělo webové stránky. Ke spuštění kódu budete potřebovat soubor HTML s určitým obsahem stránky a soubor JavaScript.

Kód použitý v tomto projektu je k dispozici v a úložiště GitHub a můžete jej používat zdarma pod licencí MIT.

  1. V novém HTML souboru s názvem index.html, přidejte následující základní HTML kód:
    html>
    <html>
    <hlava>
    <titul>Příklad použití onload
    




instagram viewer

    
titul>
    hlava>
    <tělo>
    <h1>Příklad pomocí onload()h1>
    <p>Tento příklad ukazuje, jak použít událost onload() v JavaScriptu.p>
    tělo>
    html>
  2. Vytvořte nový soubor ve stejné složce s názvem script.js. Propojte tento soubor se svou HTML stránkou pomocí značky script. Značku skriptu můžete přidat do spodní části značky body:
    <tělo>
     Váš obsah 
    <skriptsrc="script.js">skript>
    tělo>
  3. Do obsahu značky HTML body přidejte prázdnou značku odstavce.
    <pid="výstup">p>
  4. Do souboru JavaScript přidejte soubor okno.načtení funkce události. Toto se spustí, když se stránka načte:
    okno.načíst = funkce() {
    // kód, který se spustí při načtení stránky
    };
  5. Uvnitř funkce vyplňte obsah prázdné značky odstavce. Tím se změní značka odstavce tak, aby se zpráva zobrazovala pouze po načtení stránky:
    dokument.getElementById("výstup").vnitřníHTML = "Stránka načtena!";
  6. Případně můžete také použít posluchač událostí poslouchat pro DOMContentLoaded událost. DOMContentLoaded spouští dříve než window.onload. Spustí se, jakmile je dokument HTML připraven, namísto čekání na načtení všech externích zdrojů.
    dokument.addEventListener('DOMContentLoaded', funkce() {
    dokument.getElementById("výstup").vnitřníHTML = "Stránka načtena!";
    });
  7. Otevřete soubor index.html ve webovém prohlížeči a zobrazte zprávu po dokončení načítání stránky:
  8. Namísto použití událostí JavaScriptu ke kontrole, zda se stránka načetla, můžete také použít načíst Atribut HTML pro stejný výsledek. Přidejte atribut onload ke značce body v souboru HTML:
    <tělonačíst="init()">
  9. Vytvořte init() funkce uvnitř souboru JavaScript. Nedoporučuje se používat současně atribut onload HTML a událost onload JavaScript. Mohlo by to vést k neočekávanému chování nebo konfliktům mezi těmito dvěma funkcemi.
    funkceinit() {
    dokument.getElementById("výstup").vnitřníHTML = "Stránka načtena!";
    }

Doporučujeme používat posluchače událostí JavaScript a okno.načtení metoda přes HTML načíst atribut, protože udržování chování a obsahu webové stránky odděleně je dobrou praxí. Posluchače událostí JavaScriptu také poskytují větší kompatibilitu a flexibilitu než ostatní dvě metody.

Jak používat onLoad s prvkem HTML obrázku

Událost onload můžete také použít ke spuštění kódu, když se na stránku načtou jiné prvky. Příkladem toho je prvek obrázku.

  1. Do stejné složky jako váš soubor index.html přidejte libovolný obrázek.
  2. Do souboru HTML přidejte značku obrázku a propojte atribut src s názvem obrázku uloženého ve složce.
    <imgid="můj obrázek"src="Pidgeymon.png"šířka="300">
  3. Přidejte další prázdnou značku odstavce, aby se při načtení obrázku zobrazila zpráva:
    <pid="imageLoadedMessage">p>
  4. Do souboru JavaScript přidejte do obrázku událost onload. Použijte jedinečné ID myImage určit, ke kterému prvku obrázku přidat událost onload:
    var můjObrázek = dokument.getElementById("můj obrázek");
    myImage.onload = funkce() {

    };
  5. Uvnitř události onload změňte vnitřní HTML tak, aby bylo přidáno Obrázek načten zpráva:
    dokument.getElementById("imageLoadedMessage").vnitřníHTML = "Obrázek načten!";
  6. Místo použití myImage.onload, můžete také použít posluchač události k poslechu zatížení JavaScript událost:
    myImage.addEventListener('zatížení', funkce() {
    dokument.getElementById("imageLoadedMessage").vnitřníHTML = "Obrázek načten!";
    });
  7. Otevřete index.html ve webovém prohlížeči a zobrazte obrázek a zprávu:
  8. Pro stejný výsledek můžete také použít atribut HTML onload. Podobně jako u značky body přidejte do značky img atribut onload:
    <imgid="můj obrázek"src="Pidgeymon.png"šířka="300"načíst="imageLoaded()">
  9. Přidejte funkci do souboru JavaScript pro spuštění kódu po načtení obrázku:
    funkceimageLoaded() {
    dokument.getElementById("imageLoadedMessage").vnitřníHTML = "Obrázek načten!";
    }

Jak používat onLoad při načítání JavaScriptu

Atribut HTML onload můžete použít ke kontrole, zda prohlížeč dokončil načítání souboru JavaScript. Pro značku skriptu neexistuje žádná ekvivalentní událost onload JavaScriptu.

  1. Přidejte atribut onload ke značce skriptu v souboru HTML.
    <skriptsrc="script.js"načíst="LoadedJs()">skript>
  2. Přidejte funkci do souboru JavaScript. Vytiskněte zprávu od přihlášení do konzole prohlížeče:
    funkceLoadedJs() {
    řídicí panel.log("JS načteno prohlížečem!");
    }
  3. Otevřete v prohlížeči soubor index.html. Můžeš použijte Chrome DevTools pro zobrazení všech výstupů zpráv do konzoly.

Načítání webových stránek v prohlížeči

Nyní můžete používat funkce a události ke spuštění určitého kódu po dokončení načítání webové stránky. Načítání stránek je velkým faktorem při vytváření hladkého a bezproblémového uživatelského zážitku.

Můžete se dozvědět více o tom, jak můžete do svého webu integrovat zajímavější návrhy načítacích stránek.