Skip to content

Instantly share code, notes, and snippets.

@hozefaj
Last active Jan 20, 2019
Embed
What would you like to do?
defer loading image
export default class Hero extends React.Component {
state = {
showImages: false,
};
componentDidMount() {
// load images when images comes within the viewport once user starts scrolling
const domRect = this.sectionElement && this.sectionElement.getBoundingClientRect();
if (domRect && window.innerHeight - domRect.top >= 0) {
this.enableImages();
return;
}
}
enableImages() {
this.setState({
showImages: true,
});
}
renderImage(image) {
if (this.state.showImages && image) {
return <img src={image.src} className={`${ORGANISM_NAME}__image`} alt={image.alt} />;
}
return null;
}
render() {
....
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment