
Security News
libxml2 Maintainer Ends Embargoed Vulnerability Reports, Citing Unsustainable Burden
Libxml2’s solo maintainer drops embargoed security fixes, highlighting the burden on unpaid volunteers who keep critical open source software secure.
react-on-images-loaded
Advanced tools
OnImagesLoaded Control an action after every image is fully loaded, for HTML elements wrapped inside OnImagesLoaded
.
Live demo: andrew1007.github.io/react-on-images-loaded
npm install react-on-images-loaded --save
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>
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>
)
}
}
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 |
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.
MIT License
Copyright (c) 2017 Andrew Yueh.
FAQs
OnImagesLoaded
The npm package react-on-images-loaded receives a total of 984 weekly downloads. As such, react-on-images-loaded popularity was classified as not popular.
We found that react-on-images-loaded demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Security News
Libxml2’s solo maintainer drops embargoed security fixes, highlighting the burden on unpaid volunteers who keep critical open source software secure.
Research
Security News
Socket investigates hidden protestware in npm packages that blocks user interaction and plays the Ukrainian anthem for Russian-language visitors.
Research
Security News
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.