BrowserUX Lazy Img
A modern Web Component for progressive and optimized image loading, built on the IntersectionObserver API, the <img loading="lazy"> attribute, and fine-tuned rendering control.
BrowserUX Lazy Images makes it easy to implement a sleek, efficient, and fully autonomous lazy-loading system for images.
It combines native browser features like loading="lazy" with the IntersectionObserver API to intelligently trigger image loading as soon as they enter the viewport.
npm install browserux-lazy-img
Web component
See the CHANGELOG
Key Features of BrowserUX Lazy Img
- 🔭 Lazy-loads images via IntersectionObserver
- 🎚 Three loading trigger modes:
auto,visible, or pixel offset - ⏳ Animated SVG spinner with configurable color
- 🌅 Smooth
opacityfade-in transition on load (0.4s) - ⚡ Cached image detection for instant display
- 🖼 Error fallback with "Image not found" UI
- 🎛 Custom spinner via
slot name="loader" - 🔧 Custom fallback icon via
slot name="fallback" - 📐 Responsive aspect-ratio layout, no layout shift
- 🎨 CSS
::part()exposure:wrapper,ratio,img - 🧩 Optional Shadow DOM, disable with
no-shadow