https://github.com/alexstaroselsky/svelte-lazy-image

Svelte action and component to lazy load an image
https://github.com/alexstaroselsky/svelte-lazy-image

lazy-loading svelte sveltekit

Last synced: about 2 months ago
JSON representation

Svelte action and component to lazy load an image

• Host: GitHub
• URL: https://github.com/alexstaroselsky/svelte-lazy-image
• Owner: alexstaroselsky
• License: mit
• Created: 2019-07-09T14:44:54.000Z (about 5 years ago)
• Default Branch: main
• Last Pushed: 2023-06-06T02:26:30.000Z (over 1 year ago)
• Last Synced: 2024-07-13T23:43:53.032Z (2 months ago)
• Topics: lazy-loading, svelte, sveltekit
• Language: Svelte
• Homepage: https://alexstaroselsky.github.io/svelte-lazy-image/
• Size: 134 KB
• Stars: 39
• Watchers: 0
• Forks: 6
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# svelte-lazy-image

Svelte component to lazy load images using [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).

## Usage

```bash

npm install svelte-lazy-image

```

### Svelte:

#### use:action

Set `data-src` and/or `data-srcset` on an `img` element:

```html

	import { useLazyImage as lazyImage } from 'svelte-lazy-image';



```

Specify IntersectionObserver [options](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver) via object passed to `use`:

```html

	import { LazyImage, useLazyImage as lazyImage } from 'svelte-lazy-image';



```

#### Component

```html

	import { LazyImage } from 'svelte-lazy-image';

```

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

	import { LazyImage } from 'svelte-lazy-image';

```

Specify IntersectionObserver [options](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver):

```html

  import { LazyImage } from 'svelte-lazy-image';

```