svelte-lazy-image

svelte-lazy-image

Svelte component to lazy load images using Intersection Observer.

Usage

npm install svelte-lazy-image

Svelte:

use:action

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 }}
/>

Component

<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 }}
/>