Javascript 如何在 React.js 中预加载图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42615556/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to preload images in React.js?
提问by ?ubomír
How to preload images in React.js? I have dropdown select component which works like menu , but i have to preload image icons for items,because sometimes they are not visible on first open.
如何在 React.js 中预加载图像？我有像菜单一样工作的下拉选择组件，但我必须预加载项目的图像图标，因为有时它们在第一次打开时不可见。
I have tried:
我试过了：
https://github.com/sambernard/react-preload
https://github.com/sambernard/react-preload
https://github.com/wizardzloy/react-img-preload
https://github.com/wizardzloy/react-img-preload
First one has nice API easy to understand and use ,but is spaming console with warning that images were not loaded even when they were. Second one has strange API ,but I tried example and it did not preload anything.
第一个有很好的 API，易于理解和使用，但它是垃圾邮件控制台，警告图像即使在加载时也未加载。第二个有奇怪的 API，但我尝试了示例，但它没有预加载任何东西。
So I probably need to implement something at my own ,but do not know where to start. Or another possibility would be to loaded them with webpack.
所以我可能需要自己实现一些东西，但不知道从哪里开始。或者另一种可能性是用 webpack 加载它们。
回答by Lulchenko Aleksey
Supposing you have pictures: string[];- array of pictures urls defined in your component's props.
You should define componentDidMount() method in your component and then just create new Image object for each picture you want to be preloaded:
假设您有pictures: string[];- 在组件的道具中定义的图片网址数组。您应该在组件中定义 componentDidMount() 方法，然后为要预加载的每张图片创建新的 Image 对象：
componentDidMount() {
this.props.pictures.forEach((picture) => {
const img = new Image();
img.src = picture.fileName;
});
}
It forces browser to load all images. This example is written in TypeScript.
它强制浏览器加载所有图像。这个例子是用 TypeScript 编写的。
回答by Tim
If its only about delivering few small "icons" - (why not using fonts?) - and if the server serves files gzipped you could use base64 for example.
如果它只是提供几个小“图标” - （为什么不使用字体？） - 如果服务器提供压缩文件，您可以使用 base64 例如。
Otherwise if the select is not instantly visible you could also add img tags (with display: none) to the previous HTML. Another way would be to append Image objects to the DOM and wait for .onloadbefore displaying the component (this approach is used by the libraries you mentioned).
否则，如果选择不是立即可见的，您还可以将 img 标签（带display: none）添加到之前的 HTML。另一种方法是将 Image 对象附加到 DOM 并.onload在显示组件之前等待（您提到的库使用了这种方法）。
As far as I can imagine webpack or react can't do anything special for you here. This is something on client side and these are just the tools to implement your own preloading API (or even use the existing APIs in JS/TS, React, Angular, ......)
据我想象，webpack 或 react 在这里不能为你做任何特别的事情。这是客户端的东西，这些只是实现你自己的预加载 API 的工具（甚至使用 JS/TS、React、Angular 中的现有 API，......）
回答by Damien Romito
The important thing to do is to save the image variable as PERSISTANT.
重要的是将图像变量保存为 PERSISTANT。
In a persistant context,in a global var or in a component that will not be unmounted before display the images :
在持久上下文中，在全局变量或在显示图像之前不会卸载的组件中：
window.preloadedPictures = []
In my component :
在我的组件中：
var preloadedData = pictures.map((picture) => {
const img = new Image();
img.src = picture.fileName;
return img
});
myContextOrGlobalVar.preloadedPictures = preloadedData ///!IMPORTANT
回答by DevB2F
This works:
这有效：
import im1 from 'img/im1.png'
import im2 from 'img/im2.png'
import im3 from 'img/im3.png'
componentDidMount() {
imageList = [im1, im2, im3]
imageList.forEach((image) => {
new Image().src = image
});
}
回答by altoqueperro
Well my friend, you have some options with link rel preload /prefetch and webpack lazyloading chunks.
好吧，我的朋友，您可以选择链接 rel preload /prefetch 和 webpack 延迟加载块。
more information :
更多信息 ：
回答by Yung Ab
If you have some images still reloading after being cached, try to store them in the windowobject :
如果您有一些图像在缓存后仍在重新加载，请尝试将它们存储在window对象中：
componentDidMount() {
const imagesPreload = [image1, image2, image3];
imagesPreload.forEach((image) => {
const newImage = new Image();
newImage.src = image;
window[image] = newImage;
});
}
(you don't need to call images from the windowobject)
（您不需要从window对象调用图像）
