如何在 React.js 中预加载图像?

IT技术 javascript reactjs
2021-04-18 13:52:12

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

我努力了:

https://github.com/sambernard/react-preload

https://github.com/wizardzloy/react-img-preload

第一个有很好的 API,易于理解和使用,但它是垃圾邮件控制台,警告图像即使在加载时也未加载。第二个有奇怪的 API,但我尝试了示例,但它没有预加载任何东西。

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

6个回答

假设您有pictures: string[];- 在组件的props中定义的图片网址数组。您应该componentDidMount()在组件中定义方法,然后Image为要预加载的每张图片创建新对象:

componentDidMount() {
    this.props.pictures.forEach((picture) => {
        const img = new Image();
        img.src = picture.fileName;
    });
}

它强制浏览器加载所有图像。

您如何在标记中使用 new Image() 创建的图像?
2021-06-07 13:52:12
@mistarsv 除非你做一些不安全的事情,否则你不能做出反应。它确实将图像加载到缓存中,因此您可以像平常一样使用具有相同来源的 img 标签,它会立即加载。
2021-06-10 13:52:12
如果您使用 JS,请将“let”替换为“const”。在这种情况下不要使用“var”
2021-06-13 13:52:12
@kojow7 TL;如果您知道您声明的变量不会改变并免费获得一些福利,请使用“const” :) 一些优点。使用 const 允许编译器进行一些优化,因为类型和值不会改变。它还提高了代码的可读性,因为您知道该值不会改变。如果您在代码中的不同位置更改值,它会给您一个 TypeError,这可能有助于避免您更改不应该更改的值的错误
2021-06-16 13:52:12
new Image().src = picture.fileName;一行代替两行
2021-06-21 13:52:12

重要的是将图像变量保存为 PERSISTANT。

在持久上下文中,在全局变量中或在显示图像之前不会卸载的组件中:

window.preloadedPictures = []

在我的组件中:

var preloadedData = pictures.map((picture) => {
    const img = new Image();
    img.src = picture.fileName;
    return img
});

myContextOrGlobalVar.preloadedPictures = preloadedData ///IMPORTANT 
为什么重要?
2021-05-27 13:52:12
:) 只是有点混淆!重要=非常重要或不重要
2021-06-18 13:52:12

如果您有一些图像在缓存后仍在重新加载,请尝试将它们存储在window对象中:

componentDidMount() {
    const imagesPreload = [image1, image2, image3];
    imagesPreload.forEach((image) => {
        const newImage = new Image();
        newImage.src = image;
        window[image] = newImage;
    });
}

(您不需要从window对象调用图像

谢谢!!这救了我,但为什么需要它?
2021-06-20 13:52:12

这有效:

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
    });
}

如果它只是提供几个小“图标” - (为什么不使用字体?) - 如果服务器提供 gzip 压缩的文件,您可以使用 base64 例如。

否则,如果选择不是立即可见的,您还可以将 img 标签(带有display: none添加到之前的 HTML。另一种方法是将 Image 对象附加到 DOM 并.onload在显示组件之前等待(您提到的库使用了这种方法)。

据我想象,webpack 或 react 在这里无法为您做任何特别的事情。这是客户端的东西,这些只是实现您自己的预加载 API 的工具(甚至使用 JS/TS、React、Angular 中的现有 API,......)

很多理由使用 svgs 而不是字体。
2021-05-28 13:52:12
您也可以添加内联 SVG 选项(React 使这样的图标系统易于实现)。此外,如果作者决定使用数据 URI,webpack 可以轻松实现。但是,是的,这个问题不够具体。
2021-06-02 13:52:12
好吧,这些图标已经在服务器上采用 png 格式,因此我无法在不降低质量的情况下将它们转换为 svg。我无法设置 display:noone,因为对于下拉菜单,我使用的是 react-select 库,它可以自行处理附加或可见的内容
2021-06-15 13:52:12
考虑过引用 svgs 的字体吗?但是感谢您的提示 当然有很多工具可以帮助您实现这些东西..
2021-06-20 13:52:12