Making Animations Wait

Ich habe kürzlich einen CSS-Animationskurs für Designer und Entwickler gestartet, die ihre Fähigkeiten in Web-Animationen verbessern möchten. Während der Erstellung des Kurses stieß ich auf das Problem, dass Inhalte animiert wurden, bevor Assets heruntergeladen waren. Dieser Artikel beschreibt den Ansatz, den ich entwickelt habe, um das Problem zu beheben und sicherzustellen, dass alle Animationen wie erwartet abgespielt werden.

Wir kennen das alle. Wir möchten zum Beispiel einen Hero-Header beim Laden einblenden, fügen die Keyframes für das Einblenden hinzu und richten die Animation ein, aber dann beginnt die Animation, bevor das Hintergrundbild heruntergeladen wurde. Wir erhalten ein halb geladenes Bild, das ein- oder ausgeblendet wird, und schlimmer noch, unser Logo oder unsere Überschrift erscheint, bevor der Hintergrund bereit ist.

Glücklicherweise gibt es eine Möglichkeit, dies zu beheben.

Das Problem: Parallele Ereignisse

Wenn wir eine Website laden, versucht der Browser, alles so schnell wie möglich zu machen, indem er HTML und CSS herunterlädt und rendert, während andere Assets wie Bilder parallel heruntergeladen werden.

Diese Ladestruktur kann bedeuten, dass wir einige Layouts und Textinhalte schneller sehen können, aber wenn Sie eine große, magazinartige Kopfzeile erstellt haben, ist das Bild möglicherweise nicht rechtzeitig eingetroffen.

Nutzen wir einige eingebaute Browser-Tricks, um die Animation zu bremsen, bis zum richtigen Moment.

load-Ereignisse und animation-play-state

Browser stellen uns ein praktisches JavaScript-load-Ereignis zur Verfügung, wenn Inhalte vollständig geladen sind. Dieses Ereignis wird für Elemente wie Bilder und Skripte ausgelöst. Wir können dies nutzen, um zu steuern, wann unsere Animationen abgespielt werden.

Wir werden JavaScript verwenden, um auf ein load-Ereignis zu hören und animation-play-state zu verwenden, um unsere Animationen anzuhalten, bis das Ereignis eintritt.

Das folgende JavaScript sollte den Trick machen.

document.body.classList.add('js-loading');

window.addEventListener("load", showPage);

function showPage() {
  document.body.classList.remove('js-loading');
}

So funktioniert der Code. Die erste Zeile fügt der body-Elementklasse js-loading hinzu. Dann richtet sie einen Ereignis-Listener ein.

Der Ereignis-Listener wartet, bis das load-Ereignis eintritt, und führt dann die Funktion removeLoadingClass aus. Zu diesem Zeitpunkt sind alle Bilder und anderen Assets heruntergeladen.

Zuletzt entfernt removeLoadingClass die Klasse aus dem body-Tag.

Dieser Code sollte in das HTML Ihrer Seite eingefügt werden, z. B. in den head. Wenn er aus einer externen Datei geladen wird, könnte die CSS geladen und analysiert werden, bevor dieser Code ausgeführt wird, was den Animationen die Möglichkeit gäbe, zu starten, bevor wir bereit sind.

Nutzen wir diese Klasse, um alle Animationen auf der Seite warten zu lassen, bis die Inhalte bereit sind.

Auf ein Bild warten

Dieser Ansatz wartet auf alle Assets auf einer Seite. Sie möchten vielleicht nur auf ein Bild warten, z. B. in Ihrer Kopfzeile. Glücklicherweise gibt es load-Ereignisse für jedes Bild. Der Ansatz, der in Measuring Image Widths in JavaScript beschrieben wird, kann helfen.

Wir können das JavaScript anpassen, um uns auf ein bestimmtes Bild zu konzentrieren.

// Adjust the "querySelector" value to target your image
var img = document.querySelector("img");
document.body.classList.add('js-loading');
img.addEventListener("load", removeLoadingClass);
function removeLoadingClass() {
  document.body.classList.remove('js-loading');
}

Die animation-play-state-Eigenschaft

Die animation-play-state-Eigenschaft wird von modernen Browsern gut unterstützt. Sie teilt dem Browser mit, ob die aktuelle Animation läuft oder pausiert ist. Standardmäßig sind Animationen "running" (laufend).

Wir können diese Eigenschaft verwenden, um alle Animationen auf der Seite zu "pausieren", während wir die Inhalte laden. Dies fügen wir unserer CSS hinzu.

.js-loading *,
.js-loading *:before,
.js-loading *:after {
  animation-play-state: paused !important;
}

Dieser Code setzt den Wiedergabezustand von allem auf der Seite auf "paused", wann immer das body die Klasse js-loading hat.

Er stellt sicher, dass er auch auf alle :before- und :after-Pseudo-Elemente angewendet wird.

Wenn JavaScript die Klasse js-loading aus dem body-Tag entfernt, ist die Regel nicht mehr gültig und alle Animationen sind in ihrem erwarteten laufenden Zustand.

Ein schöner Vorteil dieses Ansatzes ist, dass wir nichts anderes in unserem Stylesheet ändern müssen!

Was passiert, wenn JavaScript fehlschlägt?

Das ist immer eine Frage, die es wert ist, gestellt zu werden, wenn wir uns darauf verlassen, dass JavaScript die Anzeige von Inhalten auf dem Bildschirm übernimmt. Manchmal schlägt JavaScript fehl. Es kann deaktiviert werden. Plugins können unvorhersehbare Dinge tun. Während dies in den meisten Fällen funktionieren wird, ist JavaScript immer etwas außerhalb unserer Kontrolle, daher ist es gut, darüber nachzudenken, was passieren würde, wenn JavaScript nicht wie erwartet funktioniert.

In diesem Fall denke ich, sind wir gut. Wenn das JavaScript nicht ausgeführt wird, wird die Klasse js-loading nicht angewendet. Die Animationen werden sofort abgespielt. Dies kann zu einer kleinen Seltsamkeit beim Laden des Hintergrundbildes führen, während es animiert wird, aber das ist das Worst-Case-Szenario und ein vernünftiger Fallback.

Siehe es in Aktion

Testen wir dies, um zu sehen, wie es funktioniert. Wir brauchen ein großes Bild. Ich habe dieses recht wunderschöne Nasa-Foto auf Unsplash gefunden. Es ist über 2 MB groß.

Wenn die Seite geladen wird, sollten wir zunächst den leeren Bildschirm sehen. Um es richtig in Aktion zu sehen, können wir die eingebaute Drosselungsfunktion von Chrome verwenden. Öffnen Sie den Inspektor, wählen Sie den Tab "Netzwerk" und dann das Dropdown mit den Geschwindigkeitsvorgaben. Wählen Sie daraus "Gutes 3G", das langsam genug sein sollte, um dies in Aktion zu sehen.

Drücken Sie "Erneut ausführen" bei dieser Demo und es sollten keine Animationen abgespielt werden, bis das Bild vollständig geladen ist.

Siehe den Pen Using load and animation-play-state to wait till image has loaded #2 von Donovan Hutchinson (@donovanh) auf CodePen.

Versuchen Sie, das JavaScript zu entfernen (und den Cache zu leeren, bevor Sie neu laden), um den Unterschied zu sehen!

Lade-Spinner

Wenn Sie eine leere Seite zu diesem Zeitpunkt vermeiden möchten, sollten Sie einen Lade-Text oder eine Ladeanimation haben, die die Leute darüber informiert. Das hängt davon ab, wie lange Sie die Verzögerung einschätzen. Wenn Sie ein enorm großes Bild haben und die Seite länger als ein oder zwei Sekunden wartet, dann könnte ein Spinner eine gute Idee sein.

Andererseits könnte es sich lohnen, das Bild stärker zu komprimieren oder es zu verkleinern, damit es schneller geladen wird. Experimentieren Sie und sehen Sie, was für Sie am besten funktioniert.

---

Ich hoffe, diese Technik hilft Ihnen, Ihre Animationen zusammenarbeiten zu lassen.

Wenn Sie mehr über die Animation Ihrer Websites erfahren möchten, könnten Ihnen die Tutorials auf CSSAnimation.rocks gefallen. Folgen Sie uns auf Twitter unter @cssanimation.