svelte-lazy

A svelte component to lazyload any content.

Installation

npm i svelte-lazy

For sapper server-side rendering which requires 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>

Props

height: Number|String. Default: 0 (px).
- Height of the component before load.
- Set a proper value to avoid scroll bounce. You can use the content height shown by the DevTools Inspector after loading.
keep: Boolean. Default: false.
- By default elements get unloaded after leaving view, set to true to keep all loaded ones after first appearance.
offset: Number. Default: 150 (px).
- Offset from the top of the component to the bottom of the viewport that triggers loading when in it.
placeholder: String|Component. Default: null.
- Placeholder before load.
placeholderProps: Object. Default null.
- Props for when using a component as a placeholder.
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.
- Function that is called when loaded.
resetHeightDelay: Number. Default: 0 (milliseconds).
- The delay to reset the component height to auto after loaded. Might be useful to wait for remote resources like images.

Changelog

v1.2.2

Support svelte 3 & 4
Load/unload when enters/leaves view

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>

Development

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

Test

npm test

Publish

For maintenance, bump the version in package.json then run npm publish.

Refs

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