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.
