document.write("
.preload-image-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
 
.image-preload {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-size: cover;
}
 
.image-fade-in {
  opacity: 1;
}
 
.image-loaded {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-size: cover;
  opacity: 0;
  transition: opacity 1000ms ease;
}
 
.image-fade-in {
  opacity: 1;
}
preload.css - Snippet hosted by \"Cacher\"
RAW
import React, { Component } from "react";
import PropTypes from "prop-types";
 
class HeroImage extends Component {
 
	constructor( props ) {
		super( props );
		this.fullImageSrc = null;
	}
 
	componentDidMount() {
		const fullImageLoader = new Image();
		fullImageLoader.src = this.props.srcLoaded;
 
		fullImageLoader.onload = () => {
			this.fullImageSrc.setAttribute( 'style', `background-image: url(${this.props.srcLoaded})` );
			this.fullImageSrc.classList.add( 'image-fade-in' );
		};
	}
 
 
	render() {
		const {
			srcPreload
		} = this.props;
 
		return (
			<section className="site-top-hero preload-image-container">
				<div className="image-loaded" ref={imageLoadedElem => this.fullImageSrc = imageLoadedElem} />
				<div className="image-preload" style={{"backgroundImage":`url(${srcPreload})`}} />
			</section>
		);
	}
}
 
export default HeroImage;
 
HeroImage.propTypes = {
  srcLoaded: PropTypes.string,
  srcPreload: PropTypes.string
}
HeroImage.js - Snippet hosted by \"Cacher\"
RAW
render() {
  const preloaderImage = '/path/to/preloader.gif';
  const heroImage = '/path/to/full_image.jpg';
  
  return (
    <div>
      <HeroImage srcPreload={preloaderImage} srcLoaded={heroImage} />
    </div>
    )
}
Component.js - Snippet hosted by \"Cacher\"
RAW
");