Preload and fade in an image. Optional support for lazy loading.
npm install react-preload-imagePreload and fade in an image from a background color or placeholder image.
Optional support for lazy loading so images load when scrolled into view. Uses the Intersection Observer API and falls back to simply preloading when there isn't browser support (cough, IE, cough).
Install with yarn add react-preload-image or npm install react-preload-image
Import in your components with import PreloadImage from 'react-preload-image'
These can be applied using a class or inline (examples of each method below).
- Required: Relative, absolute, or fixed position
- Required: Width & height (explicitly or via top/right/bottom/left)
- Optional: Background color or placeholder image (what will be shown before the image loads)
| Prop | Type | Required | Default | Description |
| :--- | :--- | :--- | :--- | :--- |
| src | String | Yes | | The image source |
| lazy | Boolean | No | | Enables lazy loading |
| duration | String | No | 300ms | Duration of the fade-in transition |
| ease | String | No | cubic-bezier(0.215, 0.61, 0.355, 1) | Ease of the fade-in transition |
| innerStyle | Object | No | | Specify the CSS values for backgroundSize, backgroundPosition, and backgroundRepeat |
Styles can be applied using a class:
``css`
.someClass {
position: relative;
width: 100%;
height: 200px;
background-color: #222222;
}
`jsx`
src="https://upload.wikimedia.org/wikipedia/commons/a/a5/Ailurus_fulgens_-_Syracuse_Zoo.jpg"
lazy
/>
Or inline:
`jsx`
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
backgroundColor: '#222222'
}}
src="https://upload.wikimedia.org/wikipedia/commons/a/a5/Ailurus_fulgens_-_Syracuse_Zoo.jpg"
/>
Built using NWB
To test using the included demo app:
1. Clone the repo
2. Open the directory and run npm install and npm start
3. The demo app will update to reflect any changes to it or the component
To test in your own local app:
1. Clone the repo
2. Open the directory and run npm install and npm link
3. Open a directory with a test project and run
4. Back in the react-preload-image directory run