svelte-lazyload

Lazy loading library using the svelte framework

Getting Started

Look at the example folder for a simple setup or go to the live demo page.

Installation

npm i svelte-lazyload

Usage

<script>

 import { LazyLoadContainer, LazyLoad } from 'svelte-lazyload';

 let statuses = [
     200,
     201,
     202,
     203,
     204,
     206,
     207,
     208,
     226,
     300,
     301,
     400,
     401,
     403,
     500
 ];

</script>

<LazyLoadContainer>
    {#each statuses as status, i}
    <LazyLoad id="{i}">
        <div style="min-height: 500px">
            <img src='https://httpstatusdogs.com/img/{status}.jpg' alt={status}/>
        </div>
    </LazyLoad>
    {/each}
</LazyLoadContainer>

Tuning

svelte-lazyload uses an intersection observer to determine when an element comes into the view port. It is possible to tune that behavior in accordance to the official doc and pass a prop threshold to the LazyLoadContainer. This number between 0 and 1 determines at which percentage of the target's visibility the element will be rendered. For example, a value of 0.5 means that the placeholder element has to be halfway visible for it to be swapped out for the child element of the LazyLoad tags. The default is 0.01.

Nota bene

The id prop is mandatory for the <LazyLoad> tag as it will be used to uniquely observe the element via an intersection observer.