LazyImage

A React Component for Progressive Image Loading.

Build Status npm version Dependency Status devDependency Status

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/

npm i --save lazyimage

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

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

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