Het HTML/JS onload-concept kan u helpen het gedrag van de webpagina te controleren nadat deze is geladen.

Het laden van een webpagina omvat wachten tot de pagina-inhoud, afbeeldingen en andere bronnen volledig zijn geladen.

Sommige webpagina's zorgen ervoor dat bepaalde functionaliteit pas wordt uitgevoerd nadat alles is geladen. Een voorbeeld is het ophalen van gegevens uit een database nadat de pagina is geladen.

Er zijn verschillende manieren waarop u kunt controleren of een webpagina volledig is geladen. U kunt naar gebeurtenissen luisteren met behulp van JavaScript-gebeurtenishandlers, gebruik de venster.onload JavaScript-gebeurtenis, of de laden HTML-kenmerk.

Hoe onLoad te gebruiken met het Body HTML-element

U kunt JavaScript-gebeurtenissen gebruiken om te controleren of de hoofdtekst van de webpagina is geladen. U hebt een HTML-bestand met wat pagina-inhoud en een JavaScript-bestand nodig om de code uit te voeren.

De code die in dit project wordt gebruikt, is beschikbaar in een GitHub-opslagplaats en is gratis voor u om te gebruiken onder de MIT-licentie.

instagram viewer
  1. In een nieuw HTML-bestand met de naam index.html, voeg de volgende basis-HTML-code toe:
    html>
    <html>
    <hoofd>
    <titel>Voorbeeld met onloadtitel>
    hoofd>
    <lichaam>
    <h1>Voorbeeld met onload()h1>
    <P>Dit voorbeeld laat zien hoe u de gebeurtenis onload() in JavaScript gebruikt.P>
    lichaam>
    html>
  2. Maak een nieuw bestand aan in dezelfde map met de naam script.js. Koppel dit bestand aan uw HTML-pagina met behulp van de scripttag. U kunt de script-tag onderaan de body-tag toevoegen:
    <lichaam>
     Uw inhoud 
    <scriptsrc="script.js">script>
    lichaam>
  3. Voeg binnen de inhoud van uw HTML-body-tag een lege alinea-tag toe.
    <PID kaart="uitvoer">P>
  4. Voeg in het JavaScript-bestand de venster.onload evenement functie. Dit wordt uitgevoerd wanneer de pagina is geladen:
    raam.onload = functie() {
    // code die moet worden uitgevoerd wanneer de pagina wordt geladen
    };
  5. Vul binnen de functie de inhoud van de lege alinea-tag in. Dit verandert de alinea-tag om alleen een bericht weer te geven wanneer de pagina is geladen:
    document.getElementById("uitvoer").innerHTML = "Pagina geladen!";
  6. Als alternatief kunt u ook gebruik een gebeurtenislistener luisteren naar de DOMContentGeladen evenement. DOMContentGeladen triggers eerder dan window.onload. Het wordt geactiveerd zodra het HTML-document gereed is, in plaats van te wachten tot alle externe bronnen zijn geladen.
    document.addEventListener('DOMContentGeladen', functie() {
    document.getElementById("uitvoer").innerHTML = "Pagina geladen!";
    });
  7. Open het bestand index.html in een webbrowser om het bericht te bekijken wanneer de pagina klaar is met laden:
  8. In plaats van JavaScript-gebeurtenissen te gebruiken om te controleren of een pagina is geladen, kunt u ook de laden HTML-attribuut voor hetzelfde resultaat. Voeg het onload-attribuut toe aan de body-tag in uw HTML-bestand:
    <lichaamladen="in het()">
  9. Maak de in het() functie in het JavaScript-bestand. Het wordt niet aanbevolen om tegelijkertijd het onload HTML-attribuut en de onload JavaScript-gebeurtenis te gebruiken. Dit kan leiden tot onverwacht gedrag of conflicten tussen de twee functies.
    functiein het() {
    document.getElementById("uitvoer").innerHTML = "Pagina geladen!";
    }

We raden aan om de JavaScript-gebeurtenislisteners en de venster.onload methode over de HTML laden attribuut omdat het een goede gewoonte is om het gedrag en de inhoud van de webpagina gescheiden te houden. Bovendien bieden de JavaScript-gebeurtenislisteners meer compatibiliteit en flexibiliteit ten opzichte van de andere twee methoden.

OnLoad gebruiken met het afbeeldings-HTML-element

U kunt ook de gebeurtenis onload gebruiken om code uit te voeren wanneer andere elementen op de pagina worden geladen. Een voorbeeld hiervan is het beeldelement.

  1. Voeg een afbeelding toe in dezelfde map als uw index.html-bestand.
  2. Voeg in het HTML-bestand een afbeeldingstag toe en koppel het src-attribuut aan de naam van de afbeelding die in de map is opgeslagen.
    <imgID kaart="mijnBeeld"src="Pidgeymon.png"breedte="300">
  3. Voeg nog een lege alineatag toe om een ​​bericht weer te geven wanneer de afbeelding wordt geladen:
    <PID kaart="imageLoadedMessage">P>
  4. Voeg in het JavaScript-bestand een onload-gebeurtenis toe aan de afbeelding. Gebruik de unieke id mijnBeeld om te bepalen aan welk afbeeldingselement de onload-gebeurtenis moet worden toegevoegd:
    var mijnBeeld = document.getElementById("mijnBeeld");
    mijnBeeld.onload = functie() {

    };
  5. Verander binnen de onload-gebeurtenis de interne HTML om het Afbeelding geladen bericht:
    document.getElementById("imageLoadedMessage").innerHTML = "Afbeelding geladen!";
  6. In plaats van gebruiken myImage.onload, kunt u ook een gebeurtenislistener gebruiken om naar de laden JavaScript-gebeurtenis:
    mijnAfbeelding.addEventListener('laden', functie() {
    document.getElementById("imageLoadedMessage").innerHTML = "Afbeelding geladen!";
    });
  7. Open index.html in een webbrowser om de afbeelding en het bericht te bekijken:
  8. Voor hetzelfde resultaat kunt u ook het onload HTML-attribuut gebruiken. Voeg net als bij de body-tag een onload-attribuut toe aan de img-tag:
    <imgID kaart="mijnBeeld"src="Pidgeymon.png"breedte="300"laden="afbeelding geladen()">
  9. Voeg de functie toe aan het JavaScript-bestand om de code uit te voeren wanneer de afbeelding is geladen:
    functieafbeeldingGeladen() {
    document.getElementById("imageLoadedMessage").innerHTML = "Afbeelding geladen!";
    }

Hoe onLoad te gebruiken bij het laden van JavaScript

U kunt het kenmerk HTML onload gebruiken om te controleren of de browser klaar is met het laden van het JavaScript-bestand. Er is geen gelijkwaardige JavaScript-onloadgebeurtenis voor de scripttag.

  1. Voeg het kenmerk onload toe aan de scripttag in uw HTML-bestand.
    <scriptsrc="script.js"laden="GeladenJs()">script>
  2. Voeg de functie toe aan uw JavaScript-bestand. Print een bericht door aanmelden bij de browserconsole:
    functieGeladenJs() {
    troosten.log("JS geladen door de browser!");
    }
  3. Open het bestand index.html in de browser. Jij kan gebruik Chrome DevTools om alle berichten die naar de console worden verzonden, te bekijken.

Webpagina's laden in de browser

Nu kunt u functies en gebeurtenissen gebruiken om bepaalde code uit te voeren wanneer een webpagina volledig is geladen. Het laden van pagina's is een grote factor bij het creëren van een soepele en naadloze gebruikerservaring.

U kunt meer leren over hoe u interessantere ontwerpen voor laadpagina's in uw website kunt integreren.