reactjs - 在 React 中使用进度条预加载图像和音频

Question

我正在实现一些事件，用户将能够单击各种图片并让它播放声音。应提前加载图像和音频，以便为用户提供干净的体验。为此，需要预加载图像和音频。

在加载图像/音频文件期间，我希望显示进度条。如果图像/音频已经在浏览器的缓存中，那么应该不需要显示进度条(或非常短暂地显示它)。

我见过 react-preload 库，但它似乎只适用于图像。

react-circular-progressbar 很容易用于进度条，但我不清楚如何让它与预加载一起工作。

如何在 React 中使用进度条实现图像和音频的预加载？

Answer 1

我假设您没有任何用于预加载图像和音频的 JavaScript 代码。您可以使用 Fetch API 来预加载它们:

fetch('https://somesite.com/my_image.png')
.then(resp => resp.blob())
.then(blob => {
   let url = URL.createObjectURL(blob);
   let img = new Image();
   // Image loading is an asynchronous operation
   img.onload = e => console.log('async', img.naturalWidth, img.complete);
   img.src = url;
});

本质上，您需要在“onload”事件上运行的函数中编写进度条逻辑。我们这样做的方法是，我们知道需要加载多少图像和音频，因此我们使用预加载多媒体的计数器(每次运行“onload”函数时将其增加 1)，然后将其与总数进行比较需要预加载的多媒体数量。这是您的进度栏使用的信息。