Question

所以我有一个应用程序，我使用Create-React-App（CRA）构建。

在我的一个组件中，我需要渲染18张图像，而不是小图像。这就是我目前正在做的事情。

 renderImages() {
    return someArray.map((someValue, index) => {
      let image = require(`../images/${someValue}.png`);
      return (
        <Image src={image} key={index} />
      );
    });
  }

基本上，我循环遍历一个包含png所有名称的数组，每个循环I＆＃l; ll require()每个图像，总共18个。因为当组件已经安装时试图需要这些图像，所以非常低效。结果，图像将不会显示从1秒到5秒;它相当不稳定。

所以我做了一些研究，看看如何正确地做到这一点，显然我应该使用webpack配置加载图像。听起来不错，但有问题。我使用CRA，因此我不允许触摸任何webpack配置。

然后有人建议你可以从CRA中弹出你的应用程序。所以我调查了一遍，发现了post，其中说：

不要弹出！ CRA在引擎盖下隐藏了很多东西并弹出抛出它。将src克隆到其中相对容易一些另一个完成工具设置的项目。

现在，我正在陷入困境。我不想从CRA中弹出我的应用程序并丢失它附带的所有功能，但是对于每个图像使用require的低效代码是麻烦的。

问题：如何正确加载这些静态图像，无论是使用CRA还是重新编写代码。你们会建议我做什么？

Answer 1

浏览器只下载一次图像。因此，您可以使用此类帮助功能，在致电renderImages()之前下载所有图片。

function asyncDownloadImages(images) {
  var listOfImages = images.slice();
  var blankImage = new Image();

  function downloadNextImage() {
    var path = listOfImages.shift();
    blankImage.src = path;    
  }

  blankImage.onload = function() {
    if (listOfImages.length) {
      downloadNextImage();
    }
  }

  downloadNextImage();
}

var listOfImages = [
  'https://cdn-images-1.medium.com/max/1600/1*I9pLj7mYf8LC908Zi1JYzg.png',
  'https://cdn-images-1.medium.com/max/1600/1*0klm8TN3bY1pa_CmeNBuCw.png',
  'https://cdn-images-1.medium.com/max/1600/1*-9mT3HJF6ZEpXiioSxD0Kg.png',
];

asyncDownloadImages(listOfImages);

我为你写了一些演示代码。请在here上查看。所以你可以在开发工具中看到，在DOM节点之前只下载了一次图像＆＃34; root＆＃34;使用src属性中具有相同url的图像节点获取标记。

此外，您可以改进此功能并向参数添加回调函数，该参数将在下载所有图像时调用。如果有必要;）

Create-React-App：如何正确加载静态图像

1 个答案: