svelte-lazy

svelte-lazy

A svelte component to lazyload any content including images.

Install

npm i svelte-lazy

Usage

import Lazy from 'svelte-lazy';

<Lazy height={500} offset={150}>
  <img alt="" src="https://picsum.photos/id/412/200/300" />
</Lazy>

Options

Lazy

• height: Number/String Default: 0. Height of the placeholder before the component is loaded. Set a proper value to avoid scroll bounce.

• offset: Number Default: 150. Offset to the bottom of viewport that triggers loading when the component is within the scope.

• fadeOption: Object/Boolean Default: { delay: 0, duration: 400 }. Option for the fade transition. Set null/false to disable.

• onload: Function Default: null. Callback when the component is loaded.