svelte-lazy

svelte-lazy

A svelte component to lazyload any content including images. Demo on svelte.dev/repl.

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. Height of the component before load.

  Set a proper value to avoid scroll bounce. One way is to use the content height which can be mensured by the inspector in the devTool after load.

• offset: Number Default: 150. Offset from the top of the component to the bottom of the viewport that triggers loading when in it.

  Number values use px as unit.

• placeholder: String|Component Default: null. Placeholder before load.

• placeholderProps: Object Default null. When using a component as a placeholder, the props will be passed to it.

• 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 loaded.

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

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>

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