Svelte component to lazy load images using Intersection Observer
npm install svelte-lazy-imageSvelte component to lazy load images using Intersection Observer.
``bash`
npm install svelte-lazy-image
#### use:action
Set data-src and/or data-srcset on an img element:
`html
`
Specify IntersectionObserver options via object passed to use:
`html
data-src="https://via.placeholder.com/250?text=src1" alt="foobar" use:lazyImage={{ threshold: 0.5 }}
/>
`
#### Component
`html
placeholder="https://via.placeholder.com/250?text=placeholder"
alt="Lorem Ipsum"
/>
`
The component uses $$restProps to pass props other than placeholder, src, or alt to the underlying img element. An example using img attributes srcset and sizes:
`html
placeholder="https://via.placeholder.com/250?text=placeholder"
alt="Lorem Ipsum"
srcset="https://via.placeholder.com/480 480w, https://via.placeholder.com/800 800w"
sizes="(max-width: 600px) 480px, 800px"
/>
`
Specify IntersectionObserver options:
`html
placeholder="https://via.placeholder.com/250?text=placeholder"
alt="Lorem Ipsum"
options={{ threshold: 0.5 }}
/>
``