我应该如何在React中实现图像的延迟加载？

Question

我正在尝试向我的 React 应用程序添加延迟加载，因为我有 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 年，所有主流浏览器都支持

loading="lazy"

标签 (

caniuse

) 上的 img 属性，这使其成为实现图像延迟加载的最简单方法。

但是，由于 Firefox 中的一个 bug，为了使其在 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'

属性不支持Safari

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