[Perf/UX] Review-Liste: Lazy-Loading der Thumbnails via IntersectionObserver #30

New Issue

2026-05-27T13:50:10+02:00

ferdi2go commented

2026-05-27 13:50:10 +02:00

Problem

Die Review-Liste rendert aktuell alle <img>-Elemente sofort beim Aufruf von renderReview() (index.html:1320 ff.). Bei 500+ Bildern fragt der Browser sofort 500 /thumb-Requests parallel an, was Memory-Druck und Scroll-Jank verursacht.

Fix

IntersectionObserver registriert die Thumb-Container. src wird erst gesetzt, wenn das Element im Viewport ist (mit rootMargin: 200px). Klick auf einen noch nicht geladenen Thumb soll trotzdem die Lightbox mit der voll aufgeloesten /preview-URL oeffnen.

Ausgliederung

Aus #24 ausgegliedert. Polling-Backoff und Name-Precompute wurden dort umgesetzt. Virtualisierung hat mehr Edge-Cases (Lightbox-Open auf noch nicht geladenem Bild, Scroll-Position-Erhalt bei Re-Render).

## Problem Die Review-Liste rendert aktuell alle `<img>`-Elemente sofort beim Aufruf von `renderReview()` (`index.html:1320 ff.`). Bei 500+ Bildern fragt der Browser sofort 500 `/thumb`-Requests parallel an, was Memory-Druck und Scroll-Jank verursacht. ## Fix `IntersectionObserver` registriert die Thumb-Container. `src` wird erst gesetzt, wenn das Element im Viewport ist (mit `rootMargin: 200px`). Klick auf einen noch nicht geladenen Thumb soll trotzdem die Lightbox mit der voll aufgeloesten `/preview`-URL oeffnen. ## Ausgliederung Aus #24 ausgegliedert. Polling-Backoff und Name-Precompute wurden dort umgesetzt. Virtualisierung hat mehr Edge-Cases (Lightbox-Open auf noch nicht geladenem Bild, Scroll-Position-Erhalt bei Re-Render).

ferdi2go added the ux priority: low maintenance labels 2026-05-27 13:50:10 +02:00

ferdi2go referenced this issue

2026-05-27 13:51:31 +02:00

[Perf/UX] Frontend: Polling-Backoff, Virtualisierung, Memo #24

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: ferdi2go/OnlyFrames#30