Question

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

＆＃13;

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;

＆＃13;

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

＆＃13;

Answer 1

有几种方法。我会尽力解释你能做些什么。

使用html preload属性。 reference here

link元素的rel属性的预加载值允许您在HTML头中编写声明性提取请求，指定加载后您的网页很快就会需要的资源因此，希望在页面的生命周期的早期开始预加载在浏览器的主要渲染机制开始之前加载。这个确保它们更早可用并且不太可能阻止页面的第一次渲染，从而提高性能。本文提供了有关预加载如何工作的基本指南。

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

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

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

这是做你想要的更复杂的方式。删除图像并使用直接向上html样式与CSS。这是完全可行的，如果您愿意，可以将复杂动画的加值添加到卡元素中。

使用SVG

这个与HTML选项非常相似，因为你必须使用svg-loader直接进入你的HTML。

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

这个有点meh但仍然可以完成这项任务。

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

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

1 个答案: