About this Component
Images that load gracefully instead of popping in. Lazy Image Loader shows a blur, skeleton shimmer, or solid color while the real image loads just before it scrolls into view, then fades it in smoothly — faster pages and a more polished feel in one component.
It also handles failures for you, with a fallback image, a friendly error message, and a retry button.
How to use
Add your Image and choose a Placeholder style: Blur with an optional tiny preview image, an animated Skeleton with custom base and highlight colors, or a plain Color.
Tune the Blur amount, loading Delay, and Fade duration, and keep Lazy Load on so images only load as they approach the viewport — Preload controls how early. Set the Fit, Position, and corner Radius like a normal image, and configure the error state: a Fallback image, custom Error Text, and an optional Retry button. Load and error events are available for advanced setups.
Features
Lazy loading with adjustable preload distance
Three placeholder styles: blur, skeleton, and color
Optional tiny blur preview image
Skeleton shimmer with custom colors
Smooth fade-in with adjustable duration and delay
Standard fit, position, and corner radius controls
Fallback image on failure
Custom error message and retry button
Test-error switch to preview the error state
Load and error events
Respects the visitor's reduced-motion preference
Works in galleries, cards, and full-width sections
Responsive across desktop, tablet, and mobile
Refund Policy:
Due to the nature of digital products, all sales are final. Once purchased, this component is non-refundable. Please make sure it fits your needs before completing the checkout.
Support: hi@alicorak.com
