css React Image Preloader

Posted 2021-05-13

render() {
  const preloaderImage = '/path/to/preloader.gif';
  const heroImage = '/path/to/full_image.jpg';
  
  return (
    <div>
      <HeroImage srcPreload={preloaderImage} srcLoaded={heroImage} />
    </div>
    )
}

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
}

.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;
}