Svelte component to lazy load images using Intersection Observer.
npm install svelte-lazy-image
Set data-src
and/or data-srcset
on an img
element:
<script>
import { useLazyImage as lazyImage } from 'svelte-lazy-image';
</script>
<img data-src="https://via.placeholder.com/250?text=src1" alt="foobar" use:lazyImage />
Specify IntersectionObserver options via object passed to use
:
<script>
import { LazyImage, useLazyImage as lazyImage } from 'svelte-lazy-image';
</script>
<img src="https://via.placeholder.com/250?text=placeholder1"
data-src="https://via.placeholder.com/250?text=src1" alt="foobar" use:lazyImage={{ threshold: 0.5 }}
/>
<script>
import { LazyImage } from 'svelte-lazy-image';
</script>
<LazyImage
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
:
<script>
import { LazyImage } from 'svelte-lazy-image';
</script>
<LazyImage
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:
<script>
import { LazyImage } from 'svelte-lazy-image';
</script>
<LazyImage
src="https://via.placeholder.com/250?text=src"
placeholder="https://via.placeholder.com/250?text=placeholder"
alt="Lorem Ipsum"
options={{ threshold: 0.5 }}
/>