实现路由首屏图片等待门闩
This commit is contained in:
25
docs/technical/ROUTE_IMAGE_READY_GATE_2026-04-25.md
Normal file
25
docs/technical/ROUTE_IMAGE_READY_GATE_2026-04-25.md
Normal file
@@ -0,0 +1,25 @@
|
||||
# 路由首屏图片等待门闩 2026-04-25
|
||||
|
||||
## 背景
|
||||
|
||||
平台首页、作品详情、拼图运行态等页面会在首屏展示作品封面、角色图、场景背景图或拼图原图。此前页面主体可能先进入,图片随后分批出现,移动端尤其容易看到背景图闪入、封面占位与真实图片切换。
|
||||
|
||||
## 落地约束
|
||||
|
||||
1. 入口路由组件加载完成后,页面主体先挂载但保持不可见,继续让业务数据请求、图片请求和布局计算正常发生。
|
||||
2. 门闩扫描当前路由根节点内的 `<img>`、`src/currentSrc` 和 CSS `background-image / border-image-source` 中的 `url(...)`。
|
||||
3. 扫描到的图片统一通过 `Image()` 预加载;图片成功、失败或超时都视为 settled,避免单张异常图片阻塞整站进入。
|
||||
4. 所有已发现图片 settled 且 DOM 短暂稳定后,再一次性显示页面主体。
|
||||
5. 门闩只负责前端呈现时机,不承接作品封面选择、资产读链路、玩法逻辑或后端数据裁决。
|
||||
|
||||
## 体验规则
|
||||
|
||||
- 等待态继续复用 `RouteLoadingScreen`,只显示简短加载文案,不在 UI 中追加规则说明。
|
||||
- 页面主体隐藏时使用 `visibility: hidden`,不能用 `display: none`,否则浏览器可能不触发布局与图片加载。
|
||||
- 图片加载失败不直接改写业务 UI;后续仍由原页面的兜底图、占位图或错误态处理。
|
||||
|
||||
## 涉及文件
|
||||
|
||||
- `src/routing/RouteImageReadyGate.tsx`
|
||||
- `src/routing/RouteImageReadyGate.test.ts`
|
||||
- `src/main.tsx`
|
||||
Reference in New Issue
Block a user