LazyImage

Lazy-loaded image component with progressive loading.

Overview

LazyImage uses the Intersection Observer API to lazy-load images as they enter the viewport. It shows a placeholder/skeleton until the image is visible and loaded.

Features

• Intersection Observer-based lazy loading
• Placeholder skeleton during load
• Opacity transition on load
• Error fallback display
• Thumbnail → full image progressive loading

Source

app/components/ui/LazyImage.vue