CSS, HTML und Javascript mit {stil}

Javascript onload / onunload • Dokument, Skripte, CSS geladen

load-Event – Dokument, Skripte, CSS geladen, unload – beim Verlassen der Seite

Javascript onload feuert, wenn der Browser das HTML-Dokument mit Bildern, Stylesheets und iframes in einem Fenster geladen hat. Das load-Event bezieht also alle Skripte, Grafiken, Plugins und Stylesheets ein.

DOMContentLoaded feuert, sobald das HTML Document geladen ist – ohne auf CSS-Dateien, Bilder und eingebettete iframes zu warten.

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

DOMContentLoaded gefolgt von load gefolgt von unlolad
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 und alle externen Ressourcen geladen.
beforeunload/unload
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 Browserfenster 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>

Andere Lösungen

Heute werden Scripte häufig am Ende des HTML-Dokuments geladen, damit die Seite schneller im Browser gerendert werden kann. An dieser Stelle ist es sicher, dass das Dom geladen ist – nicht aber, dass alle Bilder der Seite geladen sind.

DOMContentLoaded (ab IE9) funktioniert wie das $(function) in jQuery (jQuery .ready) und feuert, sobald das Dokument geladen ist, aber bevor Bilder, CSS-Dateien und andere externe Ressourcen geladen sind.

Ein weiterer Lösungsansatz hält mit Hilfe von Timern Ausschau, ob ein bestimmtes Element bereits geladen ist.

jQuery bietet Funktionen, um Javascript-Code auszuführen, nachdem das DOM geladen und navigierbar ist. Das gutes Beispiel ist jQuery's $(document).ready().

Eine generelle Lösung des onload-Problems ist nicht in Sicht und so bleibt beim Laden der Funktionen weiterhin eine fehlerträchtige Lücke.

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