onload-evenement

DOM events Event object

Definitie en gebruik

Het onload-evenement treedt op nadat een object is geladen.

onload wordt het meest vaak gebruikt in het <body>-element, om scripts uit te voeren nadat de webpagina alle inhoud (inclusief afbeeldingen, scriptbestanden, CSS-bestanden, enz.) volledig heeft geladen.

Het onload-evenement kan worden gebruikt om het browser-type en de browser-versie van de bezoeker te controleren en de juiste versie van de webpagina te laden op basis van deze informatie.

De onload-event kan ook gebruikt worden om cookies te verwerken (zie meer voorbeelden hieronder).

Voorbeeld

Voer JavaScript onmiddellijk na het laden van de pagina uit:

<body onload="myFunction()">

Probeer het zelf uit

Voorbeeld 2

Gebruik onload op het <img>-element. Na het laden van het beeld, geef onmiddellijk de melding "Beeld is geladen":

<img src="w3javascript.gif" onload="loadImage()" width="100" height="132">
<script>
function loadImage() {
  alert("Image is loaded");
}
</script>

Probeer het zelf uit

Voorbeeld 3

Gebruik de onload-event om cookies te verwerken:

<body onload="checkCookies()">
<script>
function checkCookies() {
  var text = "";
  if (navigator.cookieEnabled == true) {
    text = "Cookies zijn ingeschakeld.";
  } else {
     text = "Cookies zijn niet ingeschakeld.";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>

Probeer het zelf uit

Syntax

In HTML:

<element onload="myScript">

Probeer het zelf uit

In JavaScript:

object.onload = function(){myScript};

Probeer het zelf uit

In JavaScript, gebruik de addEventListener() methode:

object.addEventListener("load", myScript);

Probeer het zelf uit

Opmerking:Internet Explorer 8 of eerder ondersteunt dit niet addEventListener() methode.

Technische details

Bubbelend: Niet ondersteund
Annuleerbaar: Niet ondersteund
Eventtype: Als het door de gebruikersinterface gegenereerd wordt:UiEvent. Anders: Event.
Ondersteunde HTML-labelen: <body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>
DOM version: Level 2 Events

Browser support

Events Chrome IE Firefox Safari Opera
onload Support Support Support Support Support
DOM events Event object