⚡ 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
• Required: 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: 200px;
  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:

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 npm link [package name]
4. Back in the react-preload-image directory run npm run build