All challenges
UI · Frontend challenge · Frontend UI
Lazy Load Image
Difficulty
medium
Time
~25m
Format
Single
Grading
Human review
#ui#react#frontend#effects#intersection-observer
Mission file // read carefullymedium
Build a Lazy Loading Image component.
Requirements
- Render a placeholder (e.g. low-res thumbnail or blur block) initially.
- Start fetching and rendering the high-res image only when the element enters the viewport.
- Clean up Observer registration correctly.
Build with
ReactLive preview as you type
Human review
Start challenge
Sign in to save your progress.