⚡ React Preload Image

Preload 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).

View the demo on CodePen

Usage

Install with yarn add react-preload-image or npm install react-preload-image

Import in your components with import PreloadImage from 'react-preload-image'

Component styles

These can be applied using a class or inline (examples of each method below).

Required: Relative, absolute, or fixed position

Relative, absolute, or fixed position Required: Width & height (explicitly or via top/right/bottom/left)

Width & height (explicitly or via top/right/bottom/left) Optional: Background color or placeholder image (what will be shown before the image loads)

Component props

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

Examples

Styles can be applied using a class:

. someClass { position : relative ; width : 100 % ; height : 200 px ; background-color : # 222222 ; }

< PreloadImage className = " someClass " src = " https://upload.wikimedia.org/wikipedia/commons/a/a5/Ailurus_fulgens_-_Syracuse_Zoo.jpg " lazy />

Or inline:

< PreloadImage style = { { 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 " />

Credits

Built using NWB

Contributing

To test using the included demo app:

Clone the repo Open the directory and run npm install and npm start The demo app will update to reflect any changes to it or the component

To test in your own local app: