前端 - vue3 开发的h5 如何实现图片音频视频媒体资源预加载？
我有一个h5项目用vue3 开发的，需要有一个loading页面，加载其他组件引入的所有的图片、音频、视频等资源。这个页面有个进度条，加载完成后就可以进入后面的页面。
后面的页面可能会用到背景音乐、背景图片，我不希望后面进入这些页面的时候，图片会一点点的加载卡半天，这样视觉效果和体验不太好。
这个要怎么实现比较好呢？有没有好用的第三方工具呢？
共有1个答案
虽然提前加载在可以提升用户体验，但是也要先确定用户会打开页面的可能程度，一般来说，如果超过50% 的概率，用户会打开这个页面，才应该考虑使用预加载，否则滥用预加载对用户和网站自身来说都没有好处。
在早期说到的预加载比较多的都是 link 的 rel preload ，不过在一些较新版本的浏览器中，对于音视频已经不再允许了。
可以参考：预加载音频和视频，从而快速播放 | Articles | web.dev
除此之外，在较新的浏览器（Chromium 系列）新增了一个 ：推测规则 API - Web API | MDN
在一些场景下也能适用。
-
多媒体 HTML5 前的多媒体需要借助第三方插件，例如 Flash，但是 HTML5 将网页中的多媒体带入了新的一章。 基本用法 // 音频 // 指定资源类型可以帮助浏览器更快的定位解码 <audio autobuffer autoloop loop controls> <source src="/media/audio.mp3" type="audio/mpeg"> <source s
-
本文向大家介绍Android编程实现获取多媒体库视频、音频、图片的方法，包括了Android编程实现获取多媒体库视频、音频、图片的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了Android编程实现获取多媒体库视频、音频、图片的方法。分享给大家供大家参考，具体如下： 从媒体库中查找音频、视频、图片文件的相关信息，并获取视频、图片、专辑图片的缩略图 和一些文件操作 更多关于Androi
-
本文向大家介绍H5播放的video视频，如何实现对视频截图？相关面试题，主要包含被问及H5播放的video视频，如何实现对视频截图？时的应答技巧和注意事项，需要的朋友参考一下
-
接口说明 可以标记某个位置的实景信息、或者当前位置的说明，以图片、视频或者全景的形式展示 如需调用，请访问 开发者文档 来查看详细的接口使用说明 该接口仅开放给已获取SDK的开发者 API地址 POST /api/marker/1.0.0/addTabMedia 是否需要登录 是 请求字段说明 参数 类型 请求类型 是否必须 说明 mId string form 是 标注ID type int f
-
本文向大家介绍Python中操作各种多媒体,视频、音频到图片的代码详解，包括了Python中操作各种多媒体,视频、音频到图片的代码详解的使用技巧和注意事项，需要的朋友参考一下 我们经常会遇到一些对于多媒体文件修改的操作，像是对视频文件的操作：视频剪辑、字幕编辑、分离音频、视频音频混流等。又比如对音频文件的操作：音频剪辑，音频格式转换。再比如我们最常用的图片文件，格式转换、各个属性的编辑等。因为多媒
-
我正在制作一个音乐播放器应用程序，它将从本地存储中获取歌曲
-
本文向大家介绍Android音频开发之音频采集的实现示例，包括了Android音频开发之音频采集的实现示例的使用技巧和注意事项，需要的朋友参考一下 在 Android 系统中，一般使用 AudioRecord 或者 MediaRecord 来采集音频。 AudioRecord 是一个比较偏底层的API,它可以获取到一帧帧 PCM 数据，之后可以对这些数据进行处理。 而 MediaRecorder
-
本文向大家介绍iOS开发中音频视频播放的简单实现方法，包括了iOS开发中音频视频播放的简单实现方法的使用技巧和注意事项，需要的朋友参考一下 前言 我们在平时的iOS开发中，音视频的播放有很多种，目前系统的自带的都属于 AVFoundation 框架，更加接近于底层，所以灵活性很强，更加方便自定义 还有就是第三方音视频视频播放，特点是功能强大，实现简单，支持流媒体，下面来逐一介绍，给大家参考学习，下