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