Tipps & Tricks

Optimierung des Ladevorgangs mit einem Preloader in THREE.js

05.03.2024

4min. Lesezeit

Bei der Entwicklung meines 3D-Portfolios bin ich auf ein spannendes Thema gestoßen und deshalb habe ich mich entschlossen einen Beitrag dazu zu schreiben. Bei dem Thema handelt es sich um die Optimierung des Ladevorgangs mit einem Preloader in diesem Beispiel mit THREE.js bzw. Javascript.

Denn in der Welt der Webentwicklung ist die Optimierung des Ladevorgangs entscheidend für eine positive Benutzererfahrung. Ein effizienter Preloader kann dabei helfen, die Wartezeit für Benutzer zu minimieren und sicherzustellen, dass eine Website schnell und reibungslos geladen wird. In diesem Blogbeitrag werden wir einen einfachen Preloader erstellen und erklären, wie er den Ladevorgang einer Website verbessern kann.

Die Bedeutung eines Preloaders

Ein Preloader ist eine visuelle Anzeige, die während des Ladevorgangs einer Website angezeigt wird. Er informiert die Benutzer darüber, dass die Seite noch nicht vollständig geladen ist und hilft dabei, Frustration zu vermeiden, indem er eine Rückmeldung über den Fortschritt des Ladevorgangs gibt. Ein gut gestalteter Preloader kann dazu beitragen, die Wartezeit für Benutzer zu verkürzen und ihre Geduld zu bewahren.

Schritt 1: Asset-Verwaltung

Der erste Schritt bei der Erstellung eines Preloaders besteht darin, eine effiziente Asset-Verwaltung zu implementieren. Dazu gehören Bilder, Skripte und andere Ressourcen, die für die Website benötigt werden. Wir verwenden eine Asset-Store-Klasse, um den Status der geladenen und noch zu ladenden Assets zu verfolgen.

import assetStore from '../Utils/AssetStore.js'

export default class Preloader {
    constructor() {
        this.assetStore = assetStore
        // ...
    }
}

Schritt 2: Anzeige des Preloaders

Sobald die Asset-Verwaltung eingerichtet ist, können wir den Preloader anzeigen, während die Ressourcen geladen werden. Dazu erstellen wir eine einfache Überlagerung und einen Lade-Spinner, die dem Benutzer anzeigen, dass die Seite noch lädt.

constructor() {
    // ...
    this.overlay = document.querySelector('.overlay')
    this.loading = document.querySelector('.loading')
    this.startButton = document.querySelector('.start')
    // ...
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Threejs Portfolio</title>
        <link rel="stylesheet" href="./style.css">
	</head>
	<body>
        <canvas class="threejs"></canvas>
        <script type="module" src="./index.js"></script>
		<div class="overlay"></div>
		<h1 class="loading">Loading Experience... <span id="progressPercentage"></span>%</h1>
		<button class="start">START</button>
	</body>
</html>

Schritt 3: Fortschrittsanzeige

Um dem Benutzer den Fortschritt des Ladevorgangs anzuzeigen, berechnen wir die Anzahl der geladenen Assets im Vergleich zur Gesamtzahl der Assets und zeigen diesen Wert als Prozentsatz an.

this.assetStore.subscribe((state) => {
    // ...
    this.progress = Math.trunc(this.numberOfLoadedAssets / this.numberOfAssetsToLoad * 100)
    document.getElementById('progressPercentage').innerHTML = this.progress

    if (this.progress === 100) {
        this.loading.classList.add('fade')
        window.setTimeout(() => this.ready(), 1200)
    }
})

Schritt 4: Bereit für den Start

ready() {
    this.loading.remove()
    this.startButton.style.display = 'inline'
    this.startButton.classList.add('fadeIn')
    // ...
}

Fazit und das Ergebnis

Ein gut gestalteter Preloader kann dazu beitragen, die Benutzererfahrung zu verbessern, indem er die Wartezeit während des Ladevorgangs einer Website verkürzt. Durch die Implementierung eines Preloaders mit Asset-Verwaltung und Fortschrittsanzeige konnte ich sicherstellen, dass meine Website schnell und reibungslos geladen wird, was zu einer positiven Benutzererfahrung führt.