单页上单个音频元素的jQuery预加载器

Question

我有一个单页应用程序，其中有多个音频文件被加载到文档中。我创建了一个带有一个名为'.spinner'的类的预加载器微调器。在完成加载之前，我将如何为每个单独的音频元素显示此预加载器微调器？

Answer 1

根据 this 和 this ，在加载过程中会发生以下事件，顺序如下：

1. loadstart - 开始加载媒体时发送。
2. durationchange - 已加载或更改元数据，表示媒体持续时间发生变化。例如，当媒体加载足够的时间以便知道持续时间时，就会发送此信息。
3. loadedmetadata - 媒体的元数据已完成加载;所有属性现在都包含尽可能多的有用信息。
4. loadeddata - 媒体的第一帧已完成加载。
5. 进度 - 定期发送以通知相关方下载媒体的进度。有关当前已下载媒体数量的信息可在媒体元素的缓冲属性中找到。
6. canplay - 当有足够的数据可以播放媒体时发送，至少在几帧内播放。
7. canplaythrough - 当就绪状态变为CAN_PLAY_THROUGH时发送，表示可以不间断地播放整个媒体，假设下载速率至少保持在当前级别。注意：手动设置currentTime最终会在firefox中触发canplaythrough事件。其他浏览器可能不会触发此事件。

所以，看看那些可以玩其中两个的事件：loadstart和progress。或者您可以使用音频元素的duration和currentTime属性，例如 here 。