vue3 开发的h5 如何实现图片音频视频媒体资源预加载？

Question

我有一个h5项目用vue3 开发的，需要有一个loading页面，加载其他组件引入的所有的图片、音频、视频等资源。这个页面有个进度条，加载完成后就可以进入后面的页面。
后面的页面可能会用到背景音乐、背景图片，我不希望后面进入这些页面的时候，图片会一点点的加载卡半天，这样视觉效果和体验不太好。
这个要怎么实现比较好呢？有没有好用的第三方工具呢？

Answer 1

虽然提前加载在可以提升用户体验，但是也要先确定用户会打开页面的可能程度，一般来说，如果超过50% 的概率，用户会打开这个页面，才应该考虑使用预加载，否则滥用预加载对用户和网站自身来说都没有好处。

在早期说到的预加载比较多的都是 link 的 rel preload ，不过在一些较新版本的浏览器中，对于音视频已经不再允许了。

可以参考：预加载音频和视频，从而快速播放 | Articles | web.dev

除此之外，在较新的浏览器（Chromium 系列）新增了一个 ：推测规则 API - Web API | MDN

在一些场景下也能适用。