Reactjs 惰性图像可以完美加载，但在视口中重新出现时必须突然重新加载
我已经设法用一个加载器在React中懒洋洋地加载了一长串图像。它工作得很好。然而，当重新滚动时，图像已经消失，必须在没有平滑过渡的情况下突然重新加载才能返回屏幕。长话短说，用户体验是垃圾。通常，已加载的图像应保持显示 如何解决这样的性能问题？是不是因为加载了“lazy”本机img属性 以下是重现问题的沙箱： 代码如下：Reactjs 惰性图像可以完美加载，但在视口中重新出现时必须突然重新加载,reactjs,image,performance,lazy-loading,Reactjs,Image,Performance,Lazy Loading,我已经设法用一个加载器在React中懒洋洋地加载了一长串图像。它工作得很好。然而，当重新滚动时，图像已经消失，必须在没有平滑过渡的情况下突然重新加载才能返回屏幕。长话短说，用户体验是垃圾。通常，已加载的图像应保持显示 如何解决这样的性能问题？是不是因为加载了“lazy”本机img属性 以下是重现问题的沙箱： 代码如下： import React，{useffect，useRef，useState}来自“React”； 从“样式化组件”导入样式化的{关键帧}； 界面图像道具{ src：字符串；
import React，{useffect，useRef，useState}来自“React”；
从“样式化组件”导入样式化的{关键帧}；
界面图像道具{
src：字符串；
懒惰？：布尔；
宽度？：数字；
高度？：数字；
alt？：字符串；
}
const Root=styled.div`
边界半径：8px；
宽度：${（{width}）=>（宽度？`${width}px`:“100%”）；
高度：${（{height}）=>（高度？`${height}px`:“100%”）；
位置：相对位置；
`;
常量加载=关键帧`
0%{背景位置：-468px 0；}
100%{背景位置：900px 0；}
`;
常量占位符=styled.div`
位置：绝对位置；
宽度：100%；
身高：100%；
排名：0；
底部：0；
左：0；
右：0；
背景#f6f7f9；
动画持续时间：1s；
动画填充模式：正向；
动画迭代次数：无限；
动画名称：${loading}；
动画计时功能：线性；
背景图像：线性梯度(
对,，
#f6f7f9 0%，
rgba（1751641640.11）20%，
#f6f7f9 40%，
#f6f7f8 80%，
#f6f7f9 100%
);
背景重复：无重复；
背景尺寸：800px 400px；
身高：100%；
`;
const Picture=styled.img`
位置：绝对位置；
宽度：100%；
身高：100%；
排名：0；
底部：0；
左：0；
右：0；
对象匹配：覆盖；
对象位置：中心；
不透明度：${（{loaded}）=>（loaded？1:0）}；
过渡：不透明度1s；
`;
导出默认函数映像({
src，
宽度，
高度，
懒惰=错误，
中高音
}：ImageProps）{
const[loaded，setLoaded]=useState（false）；
const ref=useRef（null）；
useffect（（）=>{
如果（参考当前和参考当前完成）{
setLoaded（真）；
}
}, []);
返回(
setLoaded（true）}
已加载={loaded}
/>
);
}