Javascript onload / onunload • Dokument, Skripte, CSS und Bilder geladen

load-Event – Dokument, Skripte, CSS geladen, unload – beim Verlassen der Seite, dom content loaded, on load

Javascript onload feuert, wenn der Browser das HTML-Dokument mit CSS-Dateien, Bildern und iframes geladen hat. Bilder werden allerdings asynchron geladen, so dass sie beim load-Event u.U. noch nicht verfügbar sind, weil der Ladevorgang noch andauert.

Zwei Ereignisse prüfen, ob das Dokument im Browser geladen ist:
DOMContentLoaded feuert bereits, sobald das HTML-Dokument geladen ist – ohne auf CSS-Dateien, Bilder und eingebettete iframes zu warten.
onload feuert erst, wenn das HTML und eingebundene Ressourcen geladen sind.

Diese drei Ereignisse spielen eine fundamentale Rolle unter den Events im Lebenszyklus einer Webseite:

DOMContentLoaded gefolgt von load gefolgt von unload
DOMContentLoaded
Der Browser hat das HTML vollständig geladen, der DOM-Baum kann durchquert werden, aber externe Ressourcen wie Bilder und Stylesheets sind noch nicht geladen.
load
Der Browser hat das Dokument geladen und alle externen Ressourcen geladen.
beforeunload/unload
Wenn der Browser die Seite verläßt.

Die Events beforeunload / unload entstehen, Wenn der Browser die Seite verläßt.

Script laden

Scripte können Anweisungen und Funktionen erst ausführen, wenn die Elemente, auf die sie zugreifen, bereits im Browser geladen sind. Ansonsten gibt es eine Fehlermeldung, dass das Element nicht existiert oder unbekannt ist.

window.onload oder window.addEventListener('load',…) rufen Anweisungen und Funktionen auf, nachdem die Seite vollständig geladen ist. Erst dann existieren alle Elemente der Seite (HTML, CSS, Scripte, Bilder …) als DOM-Objekte. Nach dem Eintreten des onload-Events können Event Handler wie onclick oder onsubmit für die Elemente der Seite abgehört werden.

<!DOCTYPE html>
<html>
<head>
    <link media="screen" href="style.css">
</head>
<body>
    <p>…</p>
    <img src="file.jpg" alt="" />

<script src="responsive-nav.min.js">

<script>
    window.onload = function () {
        console.log('Dokument geladen');
        function init();
        function machwas();
    }
</script>
</body>
</html>

onload: Bild geladen?

Aber beim onload-Event sind nicht unbedingt alle Bilder vollständig geladen, denn der Browser lädt Bilder asynchron. Wenn Javascript nach dem onload auf ein Bild zugreift, ist ein spezieller Event Listener für das Bild gefragt.

onload: Ladezeit für Bilder

Dasselbe gilt, wenn das Script erst am Ende des HTML-Dokuments geladen wird, damit die Seite schneller im Browser gerendert werden kann. An dieser Stelle ist zwar sicher, dass das Dom geladen ist – nicht aber, dass alle Bilder der Seite fertig geladen sind. Wie gesagt: Bilder werden asynchron geladen und der Ladevorgang nimmt Zeit in Anspruch.

let img = new Image;

img.onload = function() {
   console.log ("Bild geladen");
   elem.appendChild (img);
}
img.src = "little-snail.png";  // erst nach dem Event Listener!

Der Event Listener wird vor der Zuweisung des src-Attributs aufgesetzt.

Wenn die Seite durch ein Refresh ein weiteres Mal geladen wird, sind die Bilder noch im Cache des Browsers und sofort verfügbar.

onload vs async / defer

Wenn Scripte asynchron geladen werden, verzögern sie das onload-Ereignis. Häufig laden asynchron geladene Scripte weitere Scripte – das passiert z.B. bei den Buttons der Social Media wie Facebook Like, Google+ und Twitter – »Teilen und Folgen« – und natürlich auch beim Laden von Werbung.

Google's JavaScript defer Technik hingegen verzögert das Laden, bis das onload-Script gefeuert hat.

Javascript unload

Javascript unload ruft einen Event Handler auf, wenn der Browser ein Dokument aus dem Fenster oder Frame entfernt. Das passiert z.B., wenn der Benutzer einen Link klickt, der das Fenster schließt.

Das unload-Event kann einer Anwendung auf dem Server mitgeteilen, dass der Benutzer die Anwendung verlassen hat, damit die Anwendung auf dem Server Daten über den Benutzer löscht.

Administrations-Anwendungen gehen so vor, damit niemand durch den Zurück-Button des Browsers in das Admin-Interface kommt, wenn sich der autorisierte Benutzer vom Arbeitsplatz abgemeldet hat.

onunload beim Verlassen der Seite

<script type="text/javascript" charset="utf-8">
window.onunload = function() {
   alert('by by Honey')
};
</script>

Eigenschaften von onload / unload

target
Objekt zu dem das Ereignis ursprünglich gesendet wurde
eventPhase
Phase, in der das Ereignis bearbeitet wird: AT_TARGET, BUBBLING_PHASE, CAPTURING_PHASE
bubbles
Nein
cancelable
Nein/dd>
timeStamp
Zeit in Millisekunden, zu der das Ereignis eingetreten ist
DomContentLoaded vs. load DOMContentLoaded load beforeunload/unload onload onload-test.htmlstyle.css cookieconsent.min.jssable.png melone.jpglarge-elefant.jpg large-snail.pngiframe.html 64951552dara:image/png;base64, 451314759player.de-DE.js player.cssfavicon.ico documentcss jspng jpgjpg pngdokument dokumentpng dokumentjs cssico 3,30 KB 1,79 KB 1,78 KB 199,15 KB 18,15 KB 5,15 MB 5,52 MB 5,90 KB 6,48 KB 5,12 KB 861 KB 158,57 KB 17,29 KB 1,84 KB 41,9 ms40,4 ms44,3 ms665 ms220 ms8,10 s8,73 s49,5 ms218 ms13,8 ms100 ms670 ms345 ms132 ms DOMContentLoaded onload