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

本文介绍了我应该如何在Reaction中为我的图像实现延迟加载？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在尝试将延迟加载添加到我的Reaction应用程序中，因为我有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]} /> ) })

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

推荐答案

您可以将loading属性添加到您的图像元素以延迟加载图像。有关此属性的完整解释器指南，请参阅web.dev。

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

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