diff --git a/WebVue/src/utils/imageRetry.ts b/WebVue/src/utils/imageRetry.ts index 9021d76..980662f 100644 --- a/WebVue/src/utils/imageRetry.ts +++ b/WebVue/src/utils/imageRetry.ts @@ -1,39 +1,41 @@ /** - * 图片加载失败重试。 + * 图片加载失败重试(最多 3 次)。 * - * 背景:视频封面(jpg)是服务端 ffmpeg 异步生成的,列表查询返回时文件常常还没落盘, + * 背景:视频封面(jpg)是服务端 ffmpeg 生成的,列表查询返回时文件可能还没落盘, * 首次请求会拿到 404;而 一旦失败不会自动重试,只有 src 变了才会再请求一次, * 表现就是"必须手动刷新页面才有图"。 * - * 这里失败后按退避重试,重试时把查询参数换成一次性时间戳绕开缓存。 - * 重试次数用 dataset 记在 上,src 变了(重新查询拿到新地址)就重新计数。 + * 计数口径很关键:服务端每次查询都会重新拼 ?v=时间戳,src 每次都不一样。 + * 如果按 src 计数,列表每刷新一次计数就被重置,会一直重试、图片一闪一闪。 + * 所以这里按「去掉查询参数的图片地址」累计,一个封面最多重试 3 次,用完就放弃。 */ const RETRY_DELAYS = [800, 2000, 4000]; +const MAX_RETRY = RETRY_DELAYS.length; -export const retryImage = (e: Event, max: number = RETRY_DELAYS.length) => { +/** key = 去掉查询参数的图片地址,value = 已重试次数 */ +const retryTimes = new Map(); + +export const retryImage = (e: Event) => { const img = e.target as HTMLImageElement | null; if (!img) return; const src = img.getAttribute("src") || img.src; if (!src) return; - // 地址变了说明是新一轮数据,允许重新重试 - if (img.dataset.retrySrc !== src) { - img.dataset.retrySrc = src; - img.dataset.retry = "0"; - } + // 去掉 ?v= / ?_t= 等一次性参数,保证同一张图只累计一次 + const key = src.split("?")[0]; - const times = Number(img.dataset.retry ?? 0); - if (times >= max) { - // 彻底拿不到就隐藏图片,露出底下的占位/播放图标,避免裂图 + const times = retryTimes.get(key) ?? 0; + if (times >= MAX_RETRY) { + // 重试次数用完:隐藏图片露出底下的占位/播放图标,不再尝试,避免反复闪 img.style.visibility = "hidden"; return; } - img.dataset.retry = String(times + 1); - const base = src.split("?")[0]; + retryTimes.set(key, times + 1); + window.setTimeout(() => { - img.src = `${base}?_t=${Date.now()}`; + img.src = `${key}?_t=${Date.now()}`; img.style.visibility = ""; }, RETRY_DELAYS[Math.min(times, RETRY_DELAYS.length - 1)]); };