svelte-lazy-image-loader Svelte Themes

Svelte Lazy Image Loader

Shows a loading animation while loading an image.

Svelte Lazy Image Loader

Shows a loading animation while loading an imagine.

Without placeholder animation:

With placeholder:

Install

npm

npm i svelte-lazy-image-loader

yarn

yarn add svelte-lazy-image-loader

API

Props Value
url image url as string
alt alt text as string
imageWidth width of the image as string. Defaults to 100%.
imageHeight height of the image as string
placeholderWidth width of the placeholder as string. Defaults to 100%.
placeholderHeight height of the placeholder as string. Defaults to 400px.
styling CSS properties as string

Examples

Default placeholder:

<script>
    import ImageLoader from 'svelte-lazy-image-loader';
</script>

<ImageLoader
    url="https://example.com/image.png"
    alt="example image"
    imageWidth="500px"
    imageHeight="200px"
    placeholderWidth="500px"
    placeholderHeight="200px"
    styling="margin-right: 1rem; padding: 1rem;"
/>

Custom placeholder:

<script>
    import ImageLoader from 'svelte-lazy-image-loader';
</script>

<ImageLoader
    url="https://example.com/image.png"
    alt="example image"
    imageHeight="200px"
    placeholderHeight="200px"
>
    <div>loading</div>
</ImageLoader>

Top categories

Loading Svelte Themes