浏览代码

当资源未加载,切换到其他页面标签,浏览器不加载资源,导致一直在加载中

黄琪勇 11 月之前
父节点
当前提交
a213534391
共有 1 个文件被更改,包括 12 次插入1 次删除
  1. 12 1
      src/view/audio-list/index.tsx

+ 12 - 1
src/view/audio-list/index.tsx

@@ -234,13 +234,24 @@ export default defineComponent({
 			}
 			return new Promise((resolve) => {
 				const a = new Audio(src + '?v=' + Date.now());
-				a.load();
 				a.onloadedmetadata = () => {
 					resolve(a);
 				};
 				a.onerror = () => {
 					resolve(null);
 				};
+				// 当未加载 资源之前 切换到其他浏览器标签,浏览器可能会禁止资源加载所以无法触发onloadedmetadata事件,导致一直在加载中,这里做个兼容
+				if (document.visibilityState === 'visible') {
+					a.load();
+				} else {
+					const onVisibilityChange = () => {
+						if (document.visibilityState === 'visible') {
+							document.removeEventListener('visibilitychange', onVisibilityChange);
+							a.load();
+						}
+					};
+					document.addEventListener('visibilitychange', onVisibilityChange);
+				}
 			});
 		};