OnLoad-Events

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:

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.
});

Wenn man seinen Code erst ausgeführt haben will, wenn auch alle Bilder (und weitere nachzuladenende Daten) der Seite geladen sind:

window.onload = function(event) {
  // Was zu tun ist, wenn die gesamte Seite vollständig geladen ist.
};

Bindet man in JavaScript Bilder ein, dürfen diese erst verwendet werden, wenn diese vollständig geladen sind. Dazu ist eine Callback-Funktion nötig, bzw. es muss mit async/await gearbeitet werden.

Beispiel-Code dazu folgt.