小编wil*_*ney的帖子

我正在尝试向我的 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]} />
  )
})

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