react-worker-image is a React component for loading images via a web worker. Thereby not blocking the main thread and speeding up page load time.
Using npm
npm install react-worker-image
yarn add react-worker-imagereact-worker-image exports one react component which takes src as a prop, and an optional prop of placeholder, style and imageClass which are applied to the img tag.
const ImageWorker = require('react-worker-image').default;
or
import ImageWorker from 'react-worker-image';usage in code
<ImageWorker src='http://image-url' />| Prop type | Required | type |
|---|---|---|
| src | yes | string |
| placeholder | optional | string or Component |
| style | optional | Object |
| imageClass | optional | string |
| containerClass | optional | string |
The above props are applied to the img tag.
Found a bug file them here.
Component in Action
Observe the page Load time at the bottom right corner in both cases.
The first is via a webworker and the second is the regular get.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent