Content Loading Placeholder

Demonstriert alle Varianten des data-*-gesteuerten Lade-Placeholders.

Demo 1 – data-start-event="onload" · Cached Content

Der Inhalt war bereits im <div> vorhanden. Er wird zwischengespeichert, der Placeholder gezeigt und nach 4 s wieder eingefügt. Die Animation startet sofort mit dem Seitenload (onload).

🎉 Ihr Ergebnis ist da!

Dieser Inhalt war ursprünglich im DOM vorhanden, wurde zwischengespeichert und nach Ablauf der Wartezeit wieder eingefügt.

Demo 2 – data-start-event="onload" · Leeres Div

Kein Ausgangsinhalt und keine URL. Der Placeholder läuft für 3 s und endet mit leerem Inhalt – nützlich als reine Ladeanzeige.

↓ Scroll nach unten für die Viewport-Demos ↓

Demo 3 – data-start-event="viewport" · Cached Content

Der Inhalt war im DOM. Die Animation beginnt erst, wenn dieses Element in den Viewport gescrollt wurde (≥ 100 px oder ≥ 25 % der Elementhöhe sichtbar). Dauer: 5 s.

📊 Analyse abgeschlossen

Dieser Inhalt wurde erst sichtbar, nachdem das Element in den Viewport gescrollt und die Mindestdauer abgelaufen war.

Demo 4 – data-content-url · Remote Content

Inhalt wird von einer externen URL abgerufen. Die Ausgabe erfolgt erst, wenn sowohl die Mindestdauer (4 s) als auch der HTTP-Abruf abgeschlossen sind. (Hier: https://jsonplaceholder.typicode.com/todos/1 – die Antwort wird standardmäßig als Plain Text dargestellt, um XSS zu verhindern. Mit data-content-trusted="true" kann HTML-Injektion für vollständig vertrauenswürdige Quellen aktiviert werden.)

Demo 5 – Kurze Dauer, einzelner Placeholder-Text

Nur ein einziger Placeholder-Text, Dauer 2 s, Viewport-Start.

✅ Fertig!

Schnell geladen – dieser Inhalt war direkt im DOM vorhanden.