我应该如何在Reaction中为我的图像实现延迟加载? [英] How should I implement lazy loading for my images in react?
本文介绍了我应该如何在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" />
))
这篇关于我应该如何在Reaction中为我的图像实现延迟加载?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文