JavaScript-Ressourcenladen: onload und onerror

In der dynamischen Welt der Webentwicklung ist das Beherrschen von JavaScript ein entscheidender Schritt zur Verbesserung der Funktionalität und Benutzerinteraktion von Websites. Ein wesentlicher Aspekt von JavaScript, den Entwickler verstehen müssen, ist das Verwalten des Ressourcenladens. Dieser Leitfaden erläutert die Methoden onload und onerror und bietet klare Beispiele sowie praktische Tipps, um Ressourcen wie Bilder, Skripte und mehr effizient zu handhaben.

Ressourcenladen mit dem onload-Event handhaben

Was ist das onload-Event?

Das onload-Event in JavaScript wird ausgelöst, wenn eine Ressource vollständig geladen wurde. Dies umfasst Bilder, Skripte, Stylesheets und andere Mediendateien. Es ist besonders nützlich, wenn Aktionen erst nach dem vollständigen Laden der Ressourcen ausgeführt werden sollen.

Beispiel: Anzeigen eines Bildes nach vollständigem Laden

Zur Veranschaulichung betrachten wir ein Szenario, in dem Sie ein Bild erst anzeigen möchten, nachdem es vollständig geladen ist, um die Anzeige 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>

Try it Yourself »

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

Nutzen des onerror-Events zur Fehlerbehandlung

Was ist das onerror-Event?

Das onerror-Event ist für eine robuste Webentwicklung unerlässlich. Es wird ausgelöst, wenn während des Ladens einer externen Ressource, wie eines Skripts oder Bildes, ein Fehler auftritt. Dieses Event ist entscheidend für eine elegante Fehlerbehandlung und stellt sicher, dass die Benutzererfahrung nicht unterbrochen wird.

Beispiel: Fehlerbehandlung bei einem fehlgeschlagenen Bildladen

Stellen Sie sich ein Szenario vor, in dem ein Bild aufgrund eines defekten Links oder Serverproblems nicht geladen werden kann. Mithilfe des onerror-Events können Sie eine Fallback-Lösung bereitstellen oder den Benutzer benachrichtigen. Im folgenden Beispiel erhalten Sie die von uns erstellte benutzerdefinierte Fehlermeldung, sobald Sie die Seite „Try it yourself" öffnen, da der angegebene Bildlink nicht existiert.

---

<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>

Try it Yourself »

In diesem Beispiel wird der Benutzer bei einem fehlgeschlagenen Bildladen mit einer Nachricht informiert, wodurch die Benutzererfahrung durch eine transparente Fehlerbehandlung verbessert wird.

Beispiel: Laden eines Skripts oder Stylesheets

Das gleiche Muster gilt für <script>- und <link>-Elemente. Sie können 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>

## Optimierung der Webleistung durch Event-Handling

Die Optimierung der Webleistung umfasst das Verwalten von Ressourcenladesequenzen und das elegante Behandeln von Fehlern. Die Events `onload` und `onerror` sind besonders wertvoll für die dynamische Ressourceninjektion. Anstatt alle Assets hart in HTML zu codieren, können Sie nicht-kritische Ressourcen bei Bedarf laden. Wenn das Laden einer Ressource fehlschlägt, wird das `onerror`-Event ausgelöst, sodass Sie Fallback-Logik implementieren können – wie das Ersetzen eines defekten Bildes durch einen Platzhalter oder das Wiederholen eines fehlgeschlagenen Skriptanfrags. Durch die Kombination dieser Events mit progressivem Rendering stellen Sie sicher, dass kritische Inhalte sofort angezeigt werden, während sekundäre Assets im Hintergrund laden, wodurch eine gleichmäßige Benutzererfahrung auch bei schlechten Netzwerkbedingungen aufrechterhalten wird.

## Fazit

Das Verständnis und die Implementierung der `onload`- und `onerror`-Events in JavaScript sind grundlegend für jeden Webentwickler, der die Zuverlässigkeit und Leistung seiner Webanwendungen verbessern möchte. Durch den effektiven Einsatz dieser Events können Entwickler sicherstellen, dass Ressourcen effizient verwaltet werden, was sowohl die Leistung 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 eine bessere Beherrschung des Ressourcenladens in JavaScript.

## Practice


<W3PubMaxBottomAd />

<W3Practice practiceB64="ewogICAgInF1ZXN0aW9uIjogIldlbGNoZSBBdWZnYWJlbiDDvGJlcm5laG1lbiBkaWUgJ29ubG9hZCctIHVuZCAnb25lcnJvcictRXZlbnRzIGluIEphdmFTY3JpcHQ/IiwKICAgICJvcHRpb25zIjogWwogICAgICAgIHsKICAgICAgICAgICAgInN0YXRlbWVudCI6ICJEYXMgJ29ubG9hZCctRXZlbnQgd2lyZCBhdXNnZWzDtnN0LCB3ZW5uIGVpbmUgUmVzc291cmNlIHVuZCBpaHJlIGFiaMOkbmdpZ2VuIFJlc3NvdXJjZW4gZGFzIExhZGVuIGFiZ2VzY2hsb3NzZW4gaGFiZW4uIiwKICAgICAgICAgICAgImNvcnJlY3QiOiB0cnVlCiAgICAgICAgfSwKICAgICAgICB7CiAgICAgICAgICAgICJzdGF0ZW1lbnQiOiAiRGFzICdvbmVycm9yJy1FdmVudCB3aXJkIGF1c2dlbMO2c3QsIHdlbm4gZWluZSBSZXNzb3VyY2UgbmljaHQgb3JkbnVuZ3NnZW3DpMOfIGdlbGFkZW4gd2lyZCBvZGVyIHfDpGhyZW5kIGRlcyBMYWRldm9yZ2FuZ3MgZWluIEZlaGxlciBhdWZ0cml0dC4iLAogICAgICAgICAgICAiY29ycmVjdCI6IHRydWUKICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgICAgInN0YXRlbWVudCI6ICJEYXMgJ29ubG9hZCctRXZlbnQgd2lyZCBhdXNnZWzDtnN0LCB3ZW5uIGRhcyBMYWRlbiBlaW5lciBSZXNzb3VyY2UgYmVnaW5udC4iLAogICAgICAgICAgICAiY29ycmVjdCI6IGZhbHNlCiAgICAgICAgfSwKICAgICAgICB7CiAgICAgICAgICAgICJzdGF0ZW1lbnQiOiAiRGFzICdvbmVycm9yJy1FdmVudCB3aXJkIGF1c2dlbMO2c3QsIHdlbm4gZWluZSBSZXNzb3VyY2UgdW5kIGlocmUgYWJow6RuZ2lnZW4gUmVzc291cmNlbiBkYXMgTGFkZW4gYWJnZXNjaGxvc3NlbiBoYWJlbi4iLAogICAgICAgICAgICAiY29ycmVjdCI6IGZhbHNlCiAgICAgICAgfQogICAgXQp9" />