Lazy Loading Testseite
Diese Seite demonstriert Lazy Loading von Bildern, Iframes und anderen Medien. Scrollen Sie nach unten, um zu sehen, wie Inhalte geladen werden, sobald sie in den Sichtbereich kommen.
Wie man testet:
- Öffnen Sie die DevTools des Browsers → Netzwerk-Tab
- Nach Bilder/Medien filtern
- Langsam nach unten scrollen, um zu sehen, wie Bilder dynamisch geladen werden
- Bilder sollten nur geladen werden, wenn sie kurz davor sind, in den Sichtbereich zu gelangen
1. Bild über dem Falz (Lazy Loading startet sofort)
Dieses Bild ist beim Laden der Seite sichtbar, daher sollte es sofort geladen werden:
Nach unten scrollen, um Lazy Loading auszulösen...
2. Standard Lazy Loading (data-src)
Diese Bilder verwenden data-src Attribut und werden geladen, wenn sie in den Sichtbereich gescrollt werden:
Bild #1 - Lädt, wenn sichtbar
Bild #2 - Lädt, wenn sichtbar
3. Responsive Bilder mit srcset
Diese Bilder verwenden data-srcset für responsives Laden:
4. Picture-Element mit Art Direction
Picture-Element mit verschiedenen Quellen für unterschiedliche Bildschirmgrößen:
5. Hintergrundbilder
Diese Divs verwenden data-lazy-bg für Hintergrundbilder:
6. Lazy geladene Klassen
Diese Elemente erhalten Klassen, wenn sie in den Sichtbereich kommen:
Einblenden von links
Dieses Feld wird von links eingeblendet, wenn es sichtbar ist
Einblenden nach oben
Dieses Feld wird von unten eingeblendet, wenn es sichtbar ist
Einblenden von rechts
Dieses Feld wird von rechts eingeblendet, wenn es sichtbar ist
Dynamisches Styling
Dieses Feld erhält beim Sichtbarwerden den Bootstrap-Primärhintergrund und weißen Text
7. Lazy Loaded Iframes
YouTube-Videos und andere Iframes, die beim Scrollen geladen werden:
8. Bildergalerie
Ein Raster mit vielen Bildern, um die Leistung mit mehreren lazy-geladenen Elementen zu testen:
9. Lazy Loaded Video
HTML5-Video, das beim Scrollen in den Sichtbereich geladen wird:
10. Langsamer Lade-Test (Ladeanimation Demo)
Diese Bilder von picsum.photos laden langsam, damit Sie die Ladeanimation sehen können:
Sehen Sie sich die schimmernde Ladeanimation an
Dies sollte den Ladezustand länger anzeigen
11. Fehlerbehandlungstest
Diese Bilder haben ungültige URLs, um die Fehlerbehandlung zu testen:
Dieses Bild sollte nicht geladen werden können
Dieses Bild sollte erfolgreich geladen werden
12. Endbild unten
Dieses Bild befindet sich ganz unten auf der Seite:
🎉 Du hast das Ende erreicht!
Alle lazy geladenen Inhalte sollten jetzt sichtbar sein.
12. Test für dynamische Inhalte
Klicke auf den Button unten, um dynamisch neue lazy geladene Bilder hinzuzufügen und den MutationObserver zu testen: