Installations

npm install react-on-images-loaded

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

16.13.0

NPM Version

8.1.0 Pull Requests

Open

8

Total

27

Closed

6

Merged

13

Issues

Open

1

Total

4

Closed

3

Releases

Unable to fetch releases

Languages

4

TypeScript

JavaScript

CSS

HTML

TypeScript (74.24%)

JavaScript (18.35%)

CSS (6.13%)

HTML (1.29%)

Developer

andrew1007

Download Statistics

Total Downloads

0

Last Day

0

Last Week

0

Last Month

0

Last Year

0

GitHub Statistics

MIT License

20 Stars

123 Commits

1 Forks

1 Watchers

17 Branches

1 Contributors

Updated on Jul 19, 2022

Maintainers

1

View All 1 Contributors

Package Meta Information

Latest Version

2.2.8

Package Id

react-on-images-loaded@2.2.8

Unpacked Size

17.56 kB

Size

5.21 kB

File Count

5

NPM Version

8.1.0

Node Version

16.13.0

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

0%

NaN

Compared to previous day

Last Week

0%

NaN

Compared to previous week

Last Month

0%

NaN

Compared to previous month

Last Year

0%

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

1

react

Dev Dependencies

29

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.

1import OnImagesLoaded from 'react-on-images-loaded';
2
3<OnImagesLoaded
4  onLoaded={this.runAfterImagesLoaded}
5  onTimeout={this.runTimeoutFunction}
6  timeout={7000}
7>
8  {'child HTML elements and components with images'}
9</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.

1import OnImagesLoaded from 'react-on-images-loaded'
2class Parent extends React.Component {
3  render() {
4    return (
5      <div>
6        {this.props.images.length > 0 ? <ImageElements images={this.props.images} /> : <LoadingState />}
7      </div>
8    )
9  }
10}
11
12class ImageElements extends React.Component {
13  constructor() {
14    super()
15    this.state = {
16      showImages: false
17    }
18  }
19  render() {
20    return (
21      <OnImagesLoaded
22        onLoaded={() => this.setState({ showImages: true })}
23        onTimeout={() => this.setState({ showImages: true })}
24        timeout={7000}
25      >
26        <div style={{ opacity: this.state.showImages ? 1 : 0 }}>
27          {this.props.images.map(imgUrl => <img src={imgUrl} />)}
28        </div>
29      </OnImagesLoaded>
30    )
31  }
32}

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

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to react-on-images-loaded

Other packages similar to react-on-images-loaded

react-on-images-loaded

Installations

Developer Guide

Yes

CommonJS

16.13.0

8.1.0

Pull Requests

8

27

6

13

Issues

1

4

3

Releases

Unable to fetch releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Dev Dependencies

OnImagesLoaded

Demo

Installation

Usage

Controlling images in a ternary (important!)

Properties

Notes

License

10

10

0

0

0

0

0

0

0

2

/10