react-on-images-loaded

OnImagesLoaded

OnImagesLoaded Control an action after every image is fully loaded, for HTML elements wrapped inside OnImagesLoaded.

Demo

Live demo: andrew1007.github.io/react-on-images-loaded

Installation

npm install react-on-images-loaded --save

Usage

Use OnImagesLoaded as a parent container to HTML elements. The function call is triggered after all images are fully loaded.

import OnImagesLoaded from 'react-on-images-loaded';

<OnImagesLoaded
  onLoaded={this.runAfterImagesLoaded}
  onTimeout={this.runTimeoutFunction}
  timeout={7000}
>
  {'child HTML elements and components with images'}
</OnImagesLoaded>

Controlling images in a ternary (important!)

OnImagesLoaded uses getElementsByTagName. It can't find images that are not loaded in the DOM. Make sure the images exist when OnImagesLoaded mounts.

import OnImagesLoaded from 'react-on-images-loaded'
class Parent extends React.Component {
  render() {
    return (
      <div>
        {this.props.images.length > 0 ? <ImageElements images={this.props.images} /> : <LoadingState />}
      </div>
    )
  }
}

class ImageElements extends React.Component {
  constructor() {
    super()
    this.state = {
      showImages: false
    }
  }
  render() {
    return (
      <OnImagesLoaded
        onLoaded={() => this.setState({ showImages: true })}
        onTimeout={() => this.setState({ showImages: true })}
        timeout={7000}
      >
        <div style={{ opacity: this.state.showImages ? 1 : 0 }}>
          {this.props.images.map(imgUrl => <img src={imgUrl} />)}
        </div>
      </OnImagesLoaded>
    )
  }
}

Properties

Props	Information
onLoaded	Function to run after images are loaded.
onTimeout	Function if timeout is reached. default: onLoaded function.
timeout	Time (ms) to wait before resolving component before all images are loaded. default: 7000

Notes

Depreciated props	Information
classNameOnMount	Initial className to use while images are still loading. default: none
classNameOnLoaded	className after images are loaded. default: none
onWillMount	Function to run on componentWillMount. default: null
onDidMount	Function to run on componentDidMount. default: null
placeholder	HTML element to render while images are loading. default: null
delay	Time (ms) to wait before className change and function call when all images are loaded. default: 0

From the demo, you can see that my main intention was to make a component to control className, for hidden -> visible, to prevent html elements pushing each other during image loading. But much more can be done than just that.

License

MIT License

Copyright (c) 2017 Andrew Yueh.