javascript / intermediate
Snippet
UI-Optimierung mit @defer
Der @defer-Block ermöglicht das deklarative Lazy Loading von schweren Komponenten basierend auf Triggern wie dem Scrollen in den Sichtbereich oder Hovern.
snippet.js
javascript
1
2
3
4
5
6
7
@defer (on viewport) {<heavy-chart-component />} @placeholder {<div class="skeleton">Loading graph...</div>} @loading (after 100ms; minimum 500ms) {<app-spinner />}
angular
Erklärung
1
@defer (on viewport)
Löst den Download der Komponente erst aus, wenn sie in den sichtbaren Bereich des Benutzers gelangt.
2
@placeholder
Zeigt sofort statischen Inhalt an, bevor die Defer-Logik startet.
3
minimum 500ms
Stellt sicher, dass der Ladezustand lange genug sichtbar bleibt, um UI-Flackern zu verhindern.