perf: 图片渐进加载,缩短首屏等待

- 流内单图改用缩略图(原图仅在灯箱按需加载),体积大幅减小
- BubbleImage 加 decoding=async + 加载完淡入(ark-img-fade),图片逐张出现
- 视频海报/文件预览/推荐卡/热门榜补 decoding=async、lazy
原图无缩略图时自动回退,无回归。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
TerryM
2026-05-30 01:54:28 +08:00
parent 29dc71d2dd
commit a4884a689d
6 changed files with 22 additions and 15 deletions

View File

@@ -116,6 +116,7 @@ export function RecommendedCard({
alt=""
className="ark-img-fade h-full w-full object-cover transition duration-300 group-hover:scale-[1.02]"
loading="lazy"
decoding="async"
onLoad={(e) => e.currentTarget.classList.add("is-loaded")}
/>
) : (
@@ -223,6 +224,7 @@ export function ComingSoonRecommendedCard({
alt=""
className="h-full w-full object-cover opacity-75 grayscale-[15%]"
loading="lazy"
decoding="async"
/>
<span className="absolute left-3 top-3 rounded-md bg-ark-gold px-2.5 py-1 text-xs font-semibold text-black">