Differences

This shows you the differences between two versions of the page.

--- lehrkraefte:blc:informatik:ffprg1-2021:js:start-on-load [2021/05/03 18:58] – created Ivo Blöchliger
+++ lehrkraefte:blc:informatik:ffprg1-2021:js:start-on-load [2021/05/07 14:27] (current) – Ivo Blöchliger
@@ Line 1: / Line 1: @@
+====== OnLoad-Events ======
+===== Seite komplett geladen =====
+Möchte man den Seiteninhalt beinflussen, darf man das erst tun, wenn die Seite vollständig geladen ist. Der eigene JavaScript-Code wird aber oft schon vorher geladen und ausgeführt, bevor die Seite komplett aufgebaut ist. Die Lösung ist mit Events zu arbeiten:
+<code javascript>
+document.addEventListener("DOMContentLoaded", function(){
+  // Was zu tun ist, sobald die HTML-Struktur komplett geladen ist
+  // Bilder sind zu diesem Zeitpunkt eventuell noch nicht fertig geladen.
+});
+</code>
+Wenn man seinen Code erst ausgeführt haben will, wenn auch alle Bilder (und weitere nachzuladenende Daten) der Seite geladen sind:
+<code javascript>
+window.onload = function(event) {
+  // Was zu tun ist, wenn die gesamte Seite vollständig geladen ist.
+};
+</code>
+Wenn man Bilder dynamisch nachlädt, muss auch gewartet werden, bis diese vollständig geladen sind, bevor man diese verwenden kann. [[img-onload|Link]]. Davor aber erst die anderen Blöcke bearbeiten.