React component to fetch image resources via web workers
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-image
react-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.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4