🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

react-on-images-loaded

Package Overview
Dependencies
Maintainers
1
Versions
21
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-on-images-loaded

OnImagesLoaded

2.2.8
latest
Source
npm
Version published
Weekly downloads
1K
-52.06%
Maintainers
1
Weekly downloads
 
Created
Source

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

PropsInformation
onLoadedFunction to run after images are loaded.
onTimeoutFunction if timeout is reached. default: onLoaded function.
timeoutTime (ms) to wait before resolving component before all images are loaded. default: 7000

Notes

Depreciated propsInformation
classNameOnMountInitial className to use while images are still loading. default: none
classNameOnLoadedclassName after images are loaded. default: none
onWillMountFunction to run on componentWillMount. default: null
onDidMountFunction to run on componentDidMount. default: null
placeholderHTML element to render while images are loading. default: null
delayTime (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.

Keywords

react

FAQs

Package last updated on 27 May 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts