如何在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

回答