Svelte Lazy Image Loader

Shows a loading animation while loading an image.

Need a Svelte website built?

Hire a professional Svelte developer today.

Download

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

Need a Svelte website built?

Hire a professional Svelte developer today.