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/
npm i --save lazyimage
importLazyImagefrom'lazyimage'
... <LazyImageblurRadius="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. blurRadiusdefaults to10
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