A HTML/JS betöltési koncepció segíthet a weboldal viselkedésének szabályozásában, miután az már betöltődött.

A weboldal betöltése magában foglalja az oldal tartalmának, képeinek és egyéb erőforrásainak teljes betöltődésének várakozását.

Egyes weboldalak biztosítják, hogy bizonyos funkciók ne működjenek, amíg minden be nem töltődik. Ilyen például az adatok lekérése az adatbázisból csak az oldal betöltése után.

Különféle módokon ellenőrizheti, hogy egy weboldal teljesen betöltődött-e. Az eseményeket a JavaScript eseménykezelők segítségével hallgathatja meg, használja a window.onload JavaScript esemény, vagy a Feltöltés alatt HTML attribútum.

Az onLoad használata a törzs HTML-elemmel

A JavaScript események segítségével ellenőrizheti, hogy a weboldal törzse betöltődött-e. A kód végrehajtásához szüksége lesz egy HTML-fájlra néhány oldaltartalommal és egy JavaScript-fájlra.

A projektben használt kód elérhető a GitHub adattár és az MIT licence alapján ingyenesen használható.

  1. Egy új HTML fájlban index.html, adja hozzá a következő alapvető HTML-kódot:
    html>
    <html>
    <fej>
    <cím>Példa az onload használatáracím>
    fej>
    <test>
    <h1>Példa az onload() használatárah1>
    <p>Ez a példa bemutatja, hogyan kell használni az onload() eseményt JavaScriptben.p>
    test>
    html>
  2. Hozzon létre egy új fájlt ugyanabban a mappában, melynek neve script.js. Kapcsolja össze ezt a fájlt a HTML-oldalával a szkriptcímke segítségével. A script címkét a body címke alján adhatja hozzá:
    <test>
     Az Ön tartalma 
    <forgatókönyvsrc="script.js">forgatókönyv>
    test>
  3. A HTML body címke tartalmán belül adjon hozzá egy üres bekezdéscímkét.
    <pid="Kimenet">p>
  4. A JavaScript-fájlban adja hozzá a window.onload esemény funkció. Ez az oldal betöltésekor fog végrehajtódni:
    ablak.onload = funkció() {
    // az oldal betöltésekor futtatandó kód
    };
  5. A függvényen belül töltse fel az üres bekezdéscímke tartalmát. Ez megváltoztatja a bekezdéscímkét, hogy csak az oldal betöltése után jelenjen meg üzenet:
    dokumentum.getElementById("Kimenet").innerHTML = "Az oldal betöltve!";
  6. Alternatív megoldásként azt is megteheti eseményfigyelőt használjon hallgatni a DOMContentLoaded esemény. DOMContentLoaded korábban aktiválódik, mint a windows.onload. Amint a HTML-dokumentum készen áll, akkor aktiválódik, és nem vár az összes külső erőforrás betöltésére.
    dokumentum.addEventListener("DOMContentLoaded", funkció() {
    dokumentum.getElementById("Kimenet").innerHTML = "Az oldal betöltve!";
    });
  7. Nyissa meg az index.html fájlt egy webböngészőben az üzenet megtekintéséhez, amikor az oldal betöltődik:
  8. Ahelyett, hogy JavaScript eseményeket használna annak ellenőrzésére, hogy egy oldal betöltődött-e, használhatja a Feltöltés alatt HTML attribútum ugyanarra az eredményre. Adja hozzá az onload attribútumot a body címkéhez a HTML-fájlban:
    <testFeltöltés alatt="benne()">
  9. Hozd létre a benne() függvény a JavaScript fájlon belül. Nem ajánlott az onload HTML attribútumot és az onload JavaScript eseményt egyszerre használni. Ez váratlan viselkedéshez vagy konfliktusokhoz vezethet a két funkció között.
    funkcióbenne() {
    dokumentum.getElementById("Kimenet").innerHTML = "Az oldal betöltve!";
    }

Javasoljuk a JavaScript eseményfigyelők és a window.onload módszert a HTML-en keresztül Feltöltés alatt attribútumot, mert jó gyakorlat a weboldal viselkedésének és tartalmának elkülönítése. Ezenkívül a JavaScript eseményfigyelők nagyobb kompatibilitást és rugalmasságot biztosítanak a másik két módszerhez képest.

Az onLoad használata a kép HTML-elemmel

A betöltési eseményt arra is használhatja, hogy kódot hajtson végre, amikor más elemek töltődnek be az oldalon. Példa erre a képelem.

  1. Adjon hozzá bármilyen képet ugyanabban a mappában, mint az index.html fájl.
  2. A HTML-fájlon belül adjon hozzá egy képcímkét, és kapcsolja össze az src attribútumot a mappába mentett kép nevével.
    <imgid="az én képem"src="Pidgeymon.png"szélesség="300">
  3. Adjon hozzá egy másik üres bekezdéscímkét, hogy üzenet jelenjen meg a kép betöltésekor:
    <pid="imageLoadedMessage">p>
  4. A JavaScript-fájlon belül adjon hozzá egy betöltési eseményt a képhez. Használja az egyedi azonosítót myImage annak meghatározásához, hogy melyik képelemhez kell hozzáadni a betöltési eseményt:
    var myImage = dokumentum.getElementById("az én képem");
    myImage.onload = funkció() {

    };
  5. A betöltési eseményen belül módosítsa a belső HTML-kódot, hogy hozzáadja a Kép betöltve üzenet:
    dokumentum.getElementById("imageLoadedMessage").innerHTML = "A kép betöltve!";
  6. Használat helyett myImage.onload, eseményfigyelővel is meghallgathatja a Betöltés JavaScript esemény:
    myImage.addEventListener('Betöltés', funkció() {
    dokumentum.getElementById("imageLoadedMessage").innerHTML = "A kép betöltve!";
    });
  7. Nyissa meg az index.html oldalt egy webböngészőben a kép és az üzenet megtekintéséhez:
  8. Ugyanerre az eredményre használhatja az onload HTML attribútumot is. A body címkéhez hasonlóan adjon hozzá egy onload attribútumot az img címkéhez:
    <imgid="az én képem"src="Pidgeymon.png"szélesség="300"Feltöltés alatt="imageLoaded()">
  9. Adja hozzá a függvényt a JavaScript fájlhoz a kód végrehajtásához, amikor a kép betöltődött:
    funkcióimageLoaded() {
    dokumentum.getElementById("imageLoadedMessage").innerHTML = "A kép betöltve!";
    }

Az onLoad használata a JavaScript betöltésekor

Használhatja a HTML onload attribútumot annak ellenőrzésére, hogy a böngésző befejezte-e a JavaScript-fájl betöltését. A szkriptcímkéhez nincs egyenértékű JavaScript betöltési esemény.

  1. Adja hozzá az onload attribútumot a HTML-fájl szkriptcímkéjéhez.
    <forgatókönyvsrc="script.js"Feltöltés alatt="LoadedJs()">forgatókönyv>
  2. Adja hozzá a függvényt a JavaScript-fájlhoz. Üzenet nyomtatása a következővel: bejelentkezik a böngésző konzolba:
    funkcióLoadedJs() {
    konzol.log("JS betöltötte a böngésző!");
    }
  3. Nyissa meg az index.html fájlt a böngészőben. tudsz használja a Chrome DevTools programot a konzolra kiírt üzenetek megtekintéséhez.

Weboldalak betöltése a böngészőbe

Mostantól függvényeket és eseményeket használhat bizonyos kódok végrehajtására, amikor egy weboldal betöltődött. Az oldalak betöltése fontos tényező a gördülékeny és zökkenőmentes felhasználói élmény megteremtésében.

Többet megtudhat arról, hogyan integrálhat érdekesebb betöltőoldal-terveket a webhelyébe.