0.0.12 • Published 1 year ago

svelte-fallback-loading v0.0.12

Weekly downloads
-
License
-
Repository
-
Last release
1 year ago

svelte-fallback-loading

A svelte component library to handle slow and non existent images.

Installation

npm i svelte-fallback-loading

Components

FallbackImage Configure a fallback image src that will be used if the primary image cannot be loaded.

<FallbackImage src="primary_image.png" fallback="fallback_image.png" />

LoadingImage Configure an image src that will be displayed while the primary image loads.

<LoadingImage loadingSrc="loading_image.png" src="primary_image.png" />

LoadingFallbackImage A mix of the previous 2 components, this allows you to configure a loading image and a fallback image. A fallback time can be configured as well, this will display the fallback if the primary image cannot be loaded within a timeframe.

<LoadingFallbackImage loadingSrc="loading_image.png" src="primary_image.png" fallback="fallback_image.png" />

or

<LoadingFallbackImage fallbackMs={2000} loadingSrc="loading_image.png" src="primary_image.png" fallback="fallback_image.png" />

Props

NameTypeNote
srcstring
fallbackstringOnly on FallbackImage and LoadingFallbackImage
loadingSrcstringOnly on LoadingImage and LoadingFallbackImage
fallbackMsnumberOnly on LoadingFallbackImage
altstring
heightstring or number
widthstring or number
sizesstring
srcsetstring
decoding"auto" or "sync" or "asyncSet to "auto" by default
imgClassstringImg class attribute
0.0.12

1 year ago

0.0.11

1 year ago

0.0.1

1 year ago