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>