ractive-image

A ractive component with baked in features like lazy loading, placeholders, and basic art-direction

Usage no npm install needed!

<script type="module">
  import ractiveImage from 'https://cdn.skypack.dev/ractive-image';
</script>

README

ractive-image

ractive-image is a Ractive component which sets out to grant a comfortable set of defaults, like:

  • Lazy loading
  • Placeholder images / boxes
  • Best-fit art-direction
  • srcset support (coming soon)

Demo

Check out this codepen for a demonstration using Waterfall.js

Installation

npm install ractive-image

Project Integration

Set up ractive-image like you would any other component.

Ractive.components[ "r-image" ] = require( "ractive-image" );

If not using modules, ractive-image will expose a RactiveImage global.

Basic Usage

<r-image
    id="imgProfAvatar"
    height="150px"
    width="150px"
    placeholder="/v1/me/avatar?s=sample"
    src="/v1/me/avatar?s=med" />

Events

  • select

Testing

For now, I'm manually testing initial features and small additions. Test scripts will be a requirement before launching v1.0.0

Contributing

Small project (and I'm new to writing public facing modules), so no preferences on contributions yet. PR's welcome, just name it something obvious.