Javascript 您如何让React等待所有多媒体全部加载？

我正在用ReactJS建立一个网站。该网站的第一个屏幕包含三个视频。 我想知道如何设置一个事件，当所有三个视频都已加载时触发该事件

我的目标是在所有视频成功加载之前显示加载动画（这样用户就不会坐在那里盯着等待填充的视频容器）。理想情况下，当加载动画完成时，视频将完全加载，并准备在没有UI中断的情况下播放

在这个用例中使用生命周期钩子似乎不起作用，因为这些钩子将等待DOM渲染完成，而不是多媒体加载完成

  // Does not work
  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    setIsLoading(false)
  });

我看到类似的问题提到使用

onLoad

事件：

<video ref={video1}
    autoPlay
    playsInline
    muted
    className="video"
    loop
    src={bike}
    onLoad={()=>{console.log("I don't get called???")}}
/>

{console.log（“我没有被叫？”）}
/>

但由于某些原因，此函数从未被调用

这似乎是一个比较常见的用例，所以我非常感谢您对正确解决方案的建议

额外信息：

• 这些视频将在本地可用（不从外部端点获取）
• 我更喜欢坚持使用功能组件

尝试使用“”事件

我编写了一个小程序来验证所有三个视频都是使用此事件加载的

使用onLoadedData事件触发setVideoLoaded

      <video
        autoPlay
        playsInline
        muted
        className="video"
        loop
        src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
        onLoadedData={() => {
          setVideoLoaded();
        }}
      />

{
setVideoLoaded（）；
}}
/>

每次视频加载触发事件时，递增状态。然后在三个人都准备好比赛的时候再做一些事情

const [loadCount, setLoadCount] = useState(0);

  const setVideoLoaded = () => {
    console.log("video loaded");
    if (loadCount <= 1) {
      setLoadCount(loadCount + 1);
    } else {
      console.log("All videos loaded!");
    }
  };

const[loadCount，setLoadCount]=useState（0）；
const setVideoLoaded=（）=>{
console.log（“视频加载”）；
if（装载计数）