Creates a lazy loading wrapper for images using IntersectionObserver. Defers image loading until the element enters the viewport.
Configuration options for lazy loading
LazyImageResult with element, styles, and control methods
import { createLazyImage } from '@universityofmaryland/web-elements-library/atomic';const img = document.createElement('img');img.src = 'large-image.jpg';const lazyImage = createLazyImage({ image: img, onLoad: () => console.log('Image loaded'),});document.body.appendChild(lazyImage.element); Copy
import { createLazyImage } from '@universityofmaryland/web-elements-library/atomic';const img = document.createElement('img');img.src = 'large-image.jpg';const lazyImage = createLazyImage({ image: img, onLoad: () => console.log('Image loaded'),});document.body.appendChild(lazyImage.element);
Creates a lazy loading wrapper for images using IntersectionObserver. Defers image loading until the element enters the viewport.