Skip to content

component

Lazy Image Loader

By Ali Çorak

Details

Summary

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…

Description

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

Introduction

Images that load gracefully

Rank history

Daily rank per list, from the first snapshot — lower is better.

120014001600168458/148/228/309/79/15
  • All · #6820