https://github.com/denisstasyev/svelte-image-loader

A neat preloader for images :rocket:
https://github.com/denisstasyev/svelte-image-loader

action image loading svelte svelte3

Last synced: 3 months ago
JSON representation

A neat preloader for images :rocket:

• Host: GitHub
• URL: https://github.com/denisstasyev/svelte-image-loader
• Owner: denisstasyev
• Created: 2020-08-11T20:45:02.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-08-13T21:44:24.000Z (over 4 years ago)
• Last Synced: 2024-09-29T12:04:55.375Z (4 months ago)
• Topics: action, image, loading, svelte, svelte3
• Language: JavaScript
• Homepage:
• Size: 5.86 KB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# svelte-image-loader

[![NPM version](https://img.shields.io/npm/v/svelte-image-loader.svg?style=flat)](https://www.npmjs.com/package/svelte-image-loader) [![NPM downloads](https://img.shields.io/npm/dm/svelte-image-loader.svg?style=flat)](https://www.npmjs.com/package/svelte-image-loader) [![Svelte v3](https://img.shields.io/badge/svelte-v3-blueviolet.svg)](https://svelte.dev)

Svelte action to increase the level of UX by neatly preloading images (icons)

![example](https://user-images.githubusercontent.com/25938785/90069131-846ea580-dcfa-11ea-9ff5-0844e65af73f.gif)

## :rocket: Features

This is Svelte's action to handle the `error` and`load` events of images correctly with filling it with color.

- Easy to use (an implementation through the Svelte action)

- Light size (zero-dependencies :fire: :boom:)

- Any custom CSS for loading/error state

P.S. It's recommended to use this package only for icons (small images). If you want to achieve the best UX for middle or large images, use [svelte-skeleton](https://github.com/denisstasyev/svelte-skeleton) ([NPM package](https://www.npmjs.com/package/svelte-skeleton)).

## Install

```bash

npm i svelte-image-loader

```

## Usage

```html

  import imageLoader from 'svelte-image-loader'

  ...

  const src = `...`

  const borderRadius = '50%'



  $color-icon-secondary: #BFC1C7;

  ...

  :global(.svelte-image-loader) {

  	background-color: $color-icon-secondary;

  }

  ...

```

Also you can initially call `initImageLoader` function to set custom class name (other than `.svelte-image-loader`).

## API

### Parameters

| Name         | Type   | Default      | Description                                |

| ------------ | ------ | ------------ | ------------------------------------------ |

| borderRadius | string | empty string | CSS `border-radius` of loading/error state |

## License

MIT © [Denis Stasyev](https://github.com/denisstasyev)