Lazy loading with IntersectionObserver
Load images only when users actually need them. The
IntersectionObserver API
detects when elements enter the viewport and triggers image loading at precisely the right moment.
Why use this? Unlike native lazy loading, IntersectionObserver gives you full control over timing, thresholds, and loading behavior—ideal for custom implementations.
How it works
1. Images start as lightweight placeholders with the real URL stored in data-src.
2. The observer watches each placeholder and fires when it approaches the viewport.
3. On intersection, JavaScript swaps data-src → src, triggering the actual image load.