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

React
Live preview as you type
Human review
Start challenge

Sign in to save your progress.