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 Bildern/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 laden:
Nach unten scrollen, um Lazy Loading auszulösen...
2. Standard Lazy Loading (data-src)
Diese Bilder verwenden data-src Attribut und laden, 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 Loaded Klassen
Diesen Elementen werden Klassen hinzugefügt, wenn sie in den Sichtbereich kommen:
Von links einblenden
Dieses Feld wird von links eingeblendet, wenn es sichtbar ist
Von unten einblenden
Dieses Feld wird von unten eingeblendet, wenn es sichtbar ist
Von rechts einblenden
Dieses Feld wird von rechts eingeblendet, wenn es sichtbar ist
Dynamisches Styling
Dieses Feld erhält einen Bootstrap-primären Hintergrund und weißen Text, wenn es sichtbar ist
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. Lazy Loaded HTML-Inhalt
Dieser Container lädt HTML-Inhalte, wenn er in den Sichtbereich gescrollt wird:
12. 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
13. Letztes Bild am unteren Rand
Dieses Bild befindet sich ganz unten auf der Seite:
🎉 Du hast das Ende erreicht!
Alle lazy geladenen Inhalte sollten jetzt sichtbar sein.
14. Dynamischer Inhaltstest
Klicke auf die Schaltfläche unten, um dynamisch neue lazy geladene Bilder hinzuzufügen und den MutationObserver zu testen: