Gattermeier / LazyImage

React Component for Progressive Image Loading

LazyImage

A React Component for Progressive Image Loading.

LazyImage loads a low-res version of an image blurred before replacing it with a larger, higher-res image after it was loaded completely. Inspired by a blog article on Medium's progressive image loading by José Manuel Pérez: https://jmperezperez.com/medium-image-progressive-loading-placeholder/

Install via npm

npm i --save lazyimage

Usage

import LazyImage from 'lazyimage'

...     

<LazyImage
  blurRadius="10"
  width="600"
  height="190"
  src="/path/to/very/large/image"
  low="/path/to/low/quality/image"
/>

Features

• If no low-resolution source is provided a regular image is rendered.
• blurRadius defaults to 10

Tests

Uses Lab, Code, Enzyme for unit tests. If you want to know more about React unit testing using Lab instead of Mocha or Tape read the blog post on Medium

Run tests with:

npm test