Shows a loading animation while loading an imagine.
Without placeholder animation:
With placeholder:
npm
npm i svelte-lazy-image-loader
yarn
yarn add svelte-lazy-image-loader
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 |
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>