如何在React.js中预加载图片？

如何在React.js中预载图像？我有下拉菜单选择组件，但我必须预先加载项目的图像图标，因为有时它们在第一次打开时不可见。如何在React.js中预加载图片？

我曾尝试：

第一个具有很好的API，易于理解和使用，但spaming与警告控制台，当他们的图像甚至没有加载。第二个有奇怪的API，但我试过例子，它没有预先加载任何东西。

所以我可能需要实现我自己的东西，但不知道从哪里开始。或者另一种可能性是用webpack加载它们。

2017-03-05 Ľubomír

这些图标很小吗？它们可以是数据URI吗？或者甚至可能是内联SVG？ – silvenon

如果只提供少量小图标 - （为什么不使用字体？） - 如果服务器提供gzip文件，则可以使用base64。

否则，如果选择不是即时可见的，你也可以添加img标签（与display: none）到以前的HTML。另一种方法是将Image对象附加到DOM，并在显示组件之前等待.onload（此方法由您提到的库使用）。

据我所知，webpack或反应在这里不能为你做任何特别的事情。这是客户端的东西，这些只是实现您自己的预加载API的工具（甚至使用JS/TS，React，Angular中的现有API ......）

2017-03-06 00:28:06 Tim

有[**很多原因]（https://css-tricks.com/icon-fonts-vs-svg/）使用svgs而不是字体。 – filoxo

您可以添加内联SVG选项（React使这样的图标系统易于实现）。另外，如果作者决定使用数据URI，则webpack可以轻松实现。但是，这个问题还不够具体。 – silvenon

想到引用svgs的字体？但感谢提示当然，有很多工具可以帮助你实现这样的东西.. – Tim

回答