Preload all snapshots in the create-response-app

Question

I use this one to create a card game. Now the images are loaded immediately after rendering the map component with the background image. Therefore, sometimes there are friezes. I want all images to be loaded before showing the main screen using the preloader. Please tell me how to do this. Thank.

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

Run codeHide result

Answer 1

Well, there are several ways. I will try my best to explain what you can do.

• Use preload attribute for html . link here

rel rel link HTML, , , , . , , . .

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

: css.

2. html .

, . html css. , - .

3. SVG

HTML, svg-loader, html.

4. div, , .

, .

div :

div#preload { display: none; }

// 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>
  );
}

div , , , , :

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