javascript - 在 create-react-app 中预加载所有图片

Question

我使用 this创建纸牌游戏。现在图片是在带有背景图像的卡片组件渲染后直接加载的。因此有时会有饰带。我希望在使用预加载器显示主屏幕之前加载所有图片。请告诉我如何做到这一点。谢谢。

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

好吧，有几种方法。我会尽力向您解释您可以做什么。

1. 使用 html 预加载属性。 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" />

注意:您必须放弃后台 css 使用。

1. 为卡片使用实际样式的 html。

这是做你想做的事情的更复杂的方法。删除图像并直接使用带有 css 样式的 html。这是完全可行的，并且如果您愿意的话，可以为卡片元素添加复杂动画的好处。

1. 使用 SVG

这与 HTML 选项非常相似，因为您必须使用 svg-loader 才能使其直接进入您的 html。

1. 在隐藏的 div 中声明所有图像，确保浏览器始终加载您的图像。 reference here

这个有点无聊，但仍然可以完成工作。

它包含一个隐藏的 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;
    }