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

Javascript onload Laden eines Elements

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.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Dokument geladen?

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.

Schema Ladevorgang: Dokument zuerst, erst dann Bilder
Vereinfachte Darstellung des Ladevorgangs eines HTML-Dokuments mit Bildern

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

DOMContentLoaded vs onload
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.

Ladezeit für Bilder
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.webp";  // 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.

Bei den meisten Ressourcen beginnt das Laden in dem Augenblick, in dem sie im Dokument hinzugefügt werden. <img> hingegen ist eine Ausnahme: Das Laden beginnt erst, wenn es ein src bekommt. <iframe> löst das iframe.onload-Ereignis aus, wenn das Laden abgeschlossen ist, gleich ob das Laden erfolgreich war oder einen Fehler verursacht.

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.

Asynchrone Scripte

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('bye bye 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