svelte-lazy

svelte-lazy

A svelte component to lazyload any content including images.

Installation

npm i svelte-lazy

For sapper server-side rendering and Using external components, install it to devDependencies:

npm i -D svelte-lazy

Usage

<script>
  import Lazy from 'svelte-lazy';
</script>

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

<Lazy> props

• 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 in the scope.

The Number value uses px as unit.

• class: String Default: ''. Additional class for the container div. It will be svelte-lazy ${class}.

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

• onload: Function (node) => {} Default: null. Fucntion that is called when the component is loaded.

• placeholder: String|Component Default: null. Placeholder before the component is loaded.

• resetHeightDelay: Number Default: 0 (milliseconds). Delay to reset the component height to auto after it is loaded. Might be useful for remote resources like images to load first.

Changelog

v0 -> v1.0

• Adjust dom structure
• Optimize image loading

Life cycle

            enter viewport  /                 no image -> loaded
not loaded --------------->
                            \ with image -> load event -> loaded
                                                |
            show placeholder                    |     show content

DOM structure

Before load

<div class="svelte-lazy ${class}">
    <div class="svelte-lazy-placeholder">...</div>
</div>

After load

<div class="svelte-lazy ${class}">
    <div class="svelte-lazy-content">...</div>
</div>

Demo

See demo on svelte.dev/repl.

Development

git clone https://github.com/leafOfTree/svelte-lazy
cd svelte-lazy
npm i
npm start

Refs

Based on sveltejs/component-template: A base for building shareable Svelte components