javascript - 如何检查图像是否已加载到 React 的骨架功能工作流中

Question

我正在为 Card 组件实现骨架:

{ loadingContext & <MySkeleton/> : <Card/> }

但是，为了使其真正正常工作，我需要测试 Card 组件中的图像以通过类似以下方式完成加载:

<img onload={() => setLoadingContext(false)} .../>

但是，直到将 loading 设置为 false 时才会调用此 Card 组件代码，而将 loadingContext 设置为 false 的代码位于 Card 组件中。如果您愿意，可以使用负无限循环。

那么问题来了，在这种情况下，如何有效地检查 Card 组件的图像是否已完全加载？

干杯，马特

Answer 1

首先，在卡片组件外部处理加载的目的是什么？

其次，如果我愿意这样做，我会制作一个包含图像和骨架的组件，将图像和骨架放在 View 中，并将骨架位置设置为绝对位置，而不是这种情况，直到图像未加载，我将继续在图像之上显示骨架。希望你明白了。

function ImageWithLoad(props) {

   return (
      <View>
         loadingContext && <Skeleton style={styles.absolute} />
         <Image  onload={() => setLoadingContext(false)}>
      </View>
   );
}

export default ImageWithLoad;