我应该如何实现延迟加载我的图像在反应?

Question

我试图添加延迟加载到我的反应应用程序，因为我有超过200张图片，我不需要在初始加载。如果我延迟加载图像，这是否意味着它们在屏幕上需要时才会加载?

我目前正在导入4组大约50个图像到.js文件，然后将它们添加到对象中，以便它们可以在我的组件中动态使用。它看起来是这样的……

// SportImages.js file
import Football from './images/football.png
import Cricket from './images/cricket.png
import Soccer from './images/soccer.png
... // another 50 or so imports
export default {
Football,
Cricket,
Soccer,
... // another 50 or so files
}
// and then in my component
cards.map(x => {
return (
<img src={SportImages[x.image_ref]} />
)
})

所以我的问题是，如果我想延迟加载每个图像，我应该在组件文件或主图像文件中使用延迟加载吗?

Answer 1

您可以将loading属性添加到图像元素中以惰性加载图像。关于此属性的完整解释指南可以在web.dev.

中找到。在你的例子中，它可能看起来像这样:

cards.map(card => (
<img src={SportImages[card.image_ref]} loading="lazy" />
))

您还应该确保指定width和height属性，以便浏览器可以将元素放置在具有正确尺寸的页面上。

Answer 2

截至2023年，所有主要浏览器都支持img标签(caniuse)上的loading="lazy"属性，这使得它成为实现延迟加载图像的最简单方法。

然而，由于Firefox中的一个错误，为了使其在Firefox中工作，必须将loading属性放在src属性之前。

所以，用Jon Koops的回答来说，在Firefox的错误被解决之前，这个例子将在Firefox, Chrome和Safari中工作:

cards.map(card => (
<img loading="lazy" src={SportImages[card.image_ref]} />
))

如果你把loading="lazy"放在src属性之后，延迟加载在Chrome中工作，但在Firefox中不工作。

Answer 3

你可以使用这个叫做react-lazy-load-image-component的库导入LazyLoadImage组件，然后使用它来渲染图像

cards.map(card => (
<LazyLoadImage src={SportImages[card.image_ref]} {...props}/>
))

您还可以在延迟加载图像时添加效果。您可以在这里查看该库的文档https://www.npmjs.com/package/react-lazy-load-image-component

Answer 4

loading='lazy'attributeSafari不支持

<img loading=lazy src="image.jpg" />

试试这个包:

npm i react-lazy-load-image-component

的例子:

import React from 'react';
import { LazyLoadImage, trackWindowScroll } from 'react-lazy-load-image-component';
const Gallery = ({ images, scrollPosition }) => (
<div>
{images.map((image) =>
<LazyLoadImage  scrollPosition={scrollPosition}
width="100%"
height="auto"
src={image.url} />
)}
</div>
);

export default trackWindowScroll(Gallery);