Preload all pictures in create-react-app

Question

I use this to create card game. Now pictures are loaded directly after the rendering of the card component with background-image. Therefore sometimes there are friezes. I want all the pictures to be loaded before showing the main screen using a preloader. Tell me please how to do this. Thank you.

import React from 'react';
import '../styles/Card.css';

const Card = (props) => {
  const cardClick = () => {
    if(props.status === 'unselected') {
      props.onCardClick(props.cardIndex);
    }
  };
  return (
    <div className={`card card-${props.cardName} card-${props.status}`} onClick={cardClick}>
      <div className="card-inner">
        <div className="card-face card-front"></div> 
        <div className="card-face card-back"></div>
      </div>
    </div>
  );
}

export default Card;

/*Set background to cards*/
.card-0C .card-front {
  background: url('../images/cards/0C.png');
  background-size: cover; 
}
.card-0D .card-front {
  background: url('../images/cards/0D.png');
  background-size: cover; 
}
.card-0H .card-front {
  background: url('../images/cards/0H.png');
  background-size: cover; 
}
.card-0S .card-front {
  background: url('../images/cards/0S.png');
  background-size: cover; 
}
.card-2C .card-front {
  background: url('../images/cards/2C.png');
  background-size: cover; 
}
.card-2D .card-front {
  background: url('../images/cards/2D.png');
  background-size: cover; 
}

Answer 1

Well there are a few ways. I'm gonna try and do my best to explain what you can do.

1. Use html preload attribute. reference here

The preload value of the link element's rel attribute allows you to write declarative fetch requests in your HTML head, specifying resources that your pages will need very soon after loading, which you therefore want to start preloading early in the lifecycle of a page load, before the browser's main rendering machinery kicks in. This ensures that they are made available earlier and are less likely to block the page's first render, leading to performance improvements. This article provides a basic guide to how preload works.

<link rel="preload" href="style.css" as="style">
<img rel="preload" src="image.png" as="image" />

NOTE: you would have to ditch the background css usage.

2. Use actual styled html for the cards.

This is more complex way of doing what you want. Dropping the images and using straight up html styled with css. This is perfectly doable and adds the bonus of complex animations to the cards elements if you ever do so desire.

3. Use SVGs

This one is very similar to the HTML option because you would have to use an svg-loader to make it go straight into your html.

4. Declare all your images in a hidden div making sure that the browser has your images loaded always. reference here

This one is a bit meh but does the job nonetheless.

It consists of having a hidden div like so:

div#preload { display: none; }

Then your app would load images

// assuming you have the proper loaders configured
const cardOne = require("path/to/card1/img");
const cardTwo = require("path/to/card2/img");

...

render() {
  return (
    <div id="preload">
      <img src={cardOne} />
      <img src={cardTwo} />
      {/* etc... */}
    </div>
  );
}

This div would always be rendered ensuring the browser loaded the images on first contact and your app would have the images cached and you could use a background solution like shown in the link:

#element_01 {
    background: url(path/image_01.png) no-repeat;
    display: none;
    }
#element_02 {
    background: url(path/image_02.png) no-repeat;
    display: none;
    }
#element_03 {
    background: url(path/image_03.png) no-repeat;
    display: none;
    }