svelte-lazy Svelte Themes

Svelte Lazy

A svelte component to lazyload any content including images

icon

svelte-lazy

A svelte component to lazyload any content.

demo image

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

Top categories

Loading Svelte Themes