lazyImage

lazyImage() is a one-shot use:ref factory for <img>: it swaps src from data-src (or opts.src) the first time the element enters the viewport, then disconnects the observer. Pass rootMargin to start loading before the image scrolls in. Unlike the shared-observer visible / onVisible pair, each lazyImage creates its own observer and tears it down on cleanup. Part of pota/use/intersection.

Arguments

lazyImage(opts?) takes a single options object:

Option	Type	Description
src	string	Source to load. Falls back to the element's data-src when omitted.
rootMargin	string	Forwarded to IntersectionObserver to start loading before the image scrolls in.

Returns: a ref function (node: HTMLImageElement) => void for use:ref.

Examples

Lazy-loading images

Defers each image's network request until it nears the viewport. The real URL lives in data-src; lazyImage copies it into src on first intersection.

import { render } from 'pota'
import { lazyImage } from 'pota/use/intersection'

function Gallery() {
	const urls = [
		'https://picsum.photos/seed/a/600/300',
		'https://picsum.photos/seed/b/600/300',
		'https://picsum.photos/seed/c/600/300',
	]
	return (
		<div>
			{urls.map(url => (
				<img
					data-src={url}
					alt=""
					width="600"
					height="300"
					style={{ display: 'block', margin: '2rem 0' }}
					use:ref={lazyImage({ rootMargin: '200px' })}
				/>
			))}
		</div>
	)
}

render(Gallery)