JavaScript Ressourcen laden: onload und onerror

Externe Ressourcen – Bilder, Skripte, Stylesheets, iframes – werden asynchron und unabhängig von dem JavaScript geladen, das sie anfordert. Der Browser startet den Download, und dein Code läuft weiter; die Ressource ist möglicherweise erst nach Millisekunden oder Sekunden bereit. Um zu wissen, wann eine Ressource bereit ist (oder ob sie fehlgeschlagen ist), löst jedes ladbare Element zwei Ereignisse aus: load bei Erfolg und error bei einem Fehler. Diese Seite zeigt, wie man sie mit den Handler-Eigenschaften onload / onerror verwendet.

Dies steht in engem Zusammenhang mit dem seitenweiten Lebenszyklus, der in DOMContentLoaded, load, beforeunload, unload behandelt wird, sowie mit den Ladestrategien in Skripte: async, defer.

Ressourcen laden mit dem onload-Ereignis

Was ist das onload-Ereignis?

Das load-Ereignis wird auf einem Element ausgelöst, wenn seine Ressource vollständig heruntergeladen und einsatzbereit ist. Du kannst darauf auf zwei gleichwertige Arten hören:

// 1. Handler property (only one handler allowed)
img.onload = () => { /* ... */ };

// 2. addEventListener (multiple handlers allowed)
img.addEventListener('load', () => { /* ... */ });

Die Property-Form (onload) ist praktisch, speichert aber nur einen einzigen Handler – das Zuweisen eines neuen überschreibt den alten. Bevorzuge addEventListener('load', ...), wenn mehr als ein Code-Abschnitt dieselbe Ressource beobachten soll.

Ein wichtiger Fallstrick: Bei einem <img> deckt das load-Ereignis nur die Bytes dieses einen Bildes ab. Es ist nicht das seitenweite window.onload, das auf alle Ressourcen wartet. Verwechsle die beiden nicht.

Beispiel: Ein Bild nach vollständigem Laden anzeigen

Betrachte als Veranschaulichung ein Szenario, in dem du ein Bild erst anzeigen möchtest, nachdem es vollständig geladen wurde, um die Darstellung eines unvollständigen oder defekten Bildes zu vermeiden.

<div>Here you see the w3docs logo when the page is loaded.</div>
<br />
<div id="imageContainer" style="background-color: grey;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var img = new Image();
    img.onload = function() {
        document.getElementById('imageContainer').appendChild(img);
    };
    img.src = 'https://www.w3docs.com/build/images/logo-color-w3.png';
});
</script>

Dieses Skript stellt sicher, dass das Bild erst dann an das #imageContainer-Div angehängt wird, wenn es vollständig geladen ist – das verbessert die Benutzererfahrung, indem die Anzeige eines unvollständigen Bildes verhindert wird.

Das onerror-Ereignis zur Fehlerbehandlung nutzen

Was ist das onerror-Ereignis?

Das onerror-Ereignis ist für eine robuste Webentwicklung unverzichtbar. Es wird ausgelöst, wenn beim Laden einer externen Ressource, wie z. B. eines Skripts oder eines Bildes, ein Fehler auftritt. Dieses Ereignis ist entscheidend dafür, Fehler elegant zu behandeln und sicherzustellen, dass die Benutzererfahrung nicht unterbrochen wird.

Beispiel: Fehlerbehandlung bei einem fehlgeschlagenen Bildladevorgang

Stell dir ein Szenario vor, in dem ein Bild aufgrund eines defekten Links oder eines Serverproblems nicht geladen werden kann. Mit dem onerror-Ereignis kannst du eine Fallback-Lösung bereitstellen oder den Benutzer benachrichtigen. Im folgenden Beispiel löst die defekte src sofort den Fehler-Handler aus, sobald die Seite ausgeführt wird, da der Bildlink auf keine echte Datei verweist.

Eine Ressource löst entweder load oder error aus, niemals beides. Du kannst also Handler für beide anhängen und darauf vertrauen, dass genau einer ausgeführt wird.

<div>If there was no error, you could see an image below. But it's a broken link!</div>
<br />
<div id="imageContainer" style="background-color: grey;"></div>
<script>
const img = new Image();
const imageContainer = document.getElementById('imageContainer');
img.onerror = function() {
    imageContainer.innerHTML = 'An error happened.';
};
img.onload = function() {
    imageContainer.appendChild(img);
};
img.src = 'https://www.w3docs.com/build/images/broken-link.png';
</script>

In diesem Beispiel zeigt der Container bei einem fehlgeschlagenen Bildladevorgang eine Fallback-Nachricht anstelle eines defekten Bildsymbols an und behandelt den Fehler so transparent.

Beispiel: Ein Skript oder Stylesheet laden

Dasselbe Muster gilt für <script>- und <link>-Elemente. Du kannst sie dynamisch erstellen und onload/onerror-Handler anhängen:

<script>
function loadScript(url) {
    const script = document.createElement('script');
    script.src = url;
    script.onload = () => console.log('Script loaded successfully');
    script.onerror = () => console.error('Failed to load script');
    document.head.appendChild(script);
}
loadScript('https://example.com/app.js');

function loadStylesheet(url) {
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = url;
    link.onload = () => console.log('Stylesheet loaded successfully');
    link.onerror = () => console.error('Failed to load stylesheet');
    document.head.appendChild(link);
}
loadStylesheet('https://example.com/styles.css');
</script>

Dynamisch erstellte Skripte verhalten sich wie async-Skripte: Sie werden parallel heruntergeladen und ausgeführt, sobald sie ankommen, daher ist die Ladereihenfolge nicht garantiert. Wenn ein Skript von einem anderen abhängt, verkettet sie innerhalb des onload-Handlers des ersten Skripts.

Beispiel: load/error in einem Promise kapseln

Für modernen Code bietet das Kapseln der beiden Ereignisse in einem Promise eine async/await-Ergonomie und eine einzige Stelle zur Fehlerbehandlung:

function loadScript(src) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = src;
    script.onload = () => resolve(script);
    script.onerror = () => reject(new Error(`Failed to load: ${src}`));
    document.head.append(script);
  });
}

// Usage
loadScript('https://example.com/app.js')
  .then(() => console.log('Ready to use the script'))
  .catch((err) => console.error(err.message));

Da load und error sich gegenseitig ausschließen, wird das Promise genau einmal aufgelöst – entweder erfüllt oder abgelehnt.

Web-Performance durch Ereignisbehandlung optimieren

Die Optimierung der Web-Performance umfasst die Verwaltung von Ressourcen-Ladereihenfolgen und die elegante Behandlung von Fehlern. Die Ereignisse onload und onerror sind besonders wertvoll für die dynamische Ressourcen-Injektion. Anstatt alle Assets im HTML fest zu kodieren, kannst du unkritische Ressourcen bei Bedarf laden. Wenn eine Ressource nicht geladen werden kann, wird das onerror-Ereignis ausgelöst und ermöglicht es dir, Fallback-Logik zu implementieren – zum Beispiel ein defektes Bild durch einen Platzhalter zu ersetzen oder eine fehlgeschlagene Skript-Anfrage erneut zu versuchen. Durch die Kombination dieser Ereignisse mit progressivem Rendering wird sichergestellt, dass kritische Inhalte sofort erscheinen, während sekundäre Assets im Hintergrund geladen werden, was eine reibungslose Benutzererfahrung auch bei schlechten Netzwerkbedingungen gewährleistet.

Fazit

Das Verstehen und Implementieren der Ereignisse onload und onerror in JavaScript ist grundlegend für jeden Webentwickler, der die Zuverlässigkeit und Performance seiner Webanwendungen verbessern möchte. Durch den effektiven Einsatz dieser Ereignisse können Entwickler sicherstellen, dass Ressourcen effizient verwaltet werden, was sowohl die Performance als auch die Benutzererfahrung ihrer Websites verbessert. Die bereitgestellten Beispiele bieten einen Ausgangspunkt für die Implementierung dieser Techniken in verschiedenen Szenarien und fördern ein tieferes Verständnis und die Beherrschung des Ressourcenladens in JavaScript.

Übungen