svelte-lazy-image

Svelte component to lazy load images using Intersection Observer.

Usage

``bash
npm install svelte-lazy-image
`

$3

#### 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


src="https://via.placeholder.com/250?text=src"
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


src="https://via.placeholder.com/250?text=src"
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


src="https://via.placeholder.com/250?text=src"
placeholder="https://via.placeholder.com/250?text=placeholder"
alt="Lorem Ipsum"
options={{ threshold: 0.5 }}
/>
``