BrowserUX Lazy Img: Demo

For this demo, all images feature Akira, my malinois husky. A perfect model for testing lazy loading.

With load-trigger="0", the image starts loading as soon as any part of it enters the viewport. This is the most responsive setting, ideal for images near the top of the page that should appear without delay the moment the user begins scrolling.

With load-trigger="visible", loading is deferred until the image is fully visible in the viewport. This is the recommended setting for below-the-fold images: it avoids loading content the user may never reach, saving bandwidth while ensuring a smooth reveal.

The background attribute fills the image placeholder while loading, preventing layout shifts. Combined with loader-color and loader-delay, you can fully control the loading UI, the delay ensures the spinner is only shown when loading takes noticeable time.

When a source URL is broken or unreachable, the component automatically shows a default fallback indicator. No extra code needed, the error is caught internally and the fallback is injected in place of the missing image. The example below shows how to replace that default with a custom one.

Using the slot="fallback" slot, you can provide any custom SVG or HTML element to replace the default broken-image indicator. This lets you match the fallback design to your project's visual identity.

The responsive attribute makes the component fill its parent's width while preserving the original aspect ratio defined by width and height. This eliminates cumulative layout shift (CLS) even before the image has loaded.

browserux-lazy-img is a zero-dependency Web Component. Drop it into any project, framework or vanilla, and get optimized lazy loading, error handling, and smooth fade-in transitions out of the box.