title: Preload all pictures in create-react-app
body: <p>I use <a href="https://github.com/facebookincubator/create-react-app" rel="noreferrer">this</a> 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.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import '../styles/Card.css';
  
  const Card = (props) =&gt; {
    const cardClick = () =&gt; {
      if(props.status === 'unselected') {
        props.onCardClick(props.cardIndex);
      }
    };
    return (
      &lt;div className={`card card-${props.cardName} card-${props.status}`} onClick={cardClick}&gt;
        &lt;div className="card-inner"&gt;
          &lt;div className="card-face card-front"&gt;&lt;/div&gt; 
          &lt;div className="card-face card-back"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  export default Card;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*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; 
  }</code></pre>
  </div>
  </div>
  </p>