Lazy Image Loader

Lazy Image Loader

About Lazy Image Loader

Unlock entire Depth library for $149. One price. Lifetime.

Get Depth

--------------------------------------------------------

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

  • No setup or coding required

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