我应该如何在反应中为我的图像实现延迟加载？答案

【问题标题】：How should I implement lazy loading for my images in react?我应该如何在反应中为我的图像实现延迟加载？
【发布时间】：2021-11-02 09:06:55
【问题描述】：

我正在尝试将延迟加载添加到我的 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]} />
  )
})

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

【问题讨论】：

你看过 react-lazyload npm 包吗？它支持开箱即用的延迟加载图像。您可以在此处找到文档和示例 - npmjs.com/package/react-lazyload
所以我应该在组件中延迟加载它们？这是否会推迟所有图像的加载，直到需要它们？
是的，我想是的。我没有亲自尝试过，但这就是文档所说的。

标签： reactjs lazy-loading

【解决方案1】：

您可以将loading 属性添加到您的图像元素以延迟加载图像。关于这个属性的完整解释指南可以在web.dev找到。

在您的情况下，它可能如下所示：

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

【讨论】：

loading=lazy 目前在 IOS 上的 Safari 上不受支持：caniuse.com/?search=loading
最坏的情况下它会立即加载图像，但这不会破坏任何现有的功能。
没错。但是，由于可能不必要地加载图像，它会影响 Safari 用户的 UX。