AppImg 懒加载测试

检查真实 src 是否始终保留，以及占位 srcset 是否在接近视口时切换。打开 Network，禁用缓存并筛选 app-img，再重置测试。

所有图片用例的当前状态与组件事件次数
用例	DOM 中保留 src	当前状态	load / error
普通加载	待检查	等待客户端检查	0 / 0
保留 src 的懒加载	待检查	等待客户端检查	0 / 0
响应式 srcset	待检查	等待客户端检查	0 / 0
灯箱与图注	待检查	等待客户端检查	0 / 0
动态换图与属性更新	待检查	等待客户端检查	0 / 0
加载失败与恢复	待检查	等待客户端检查	0 / 0

占位图不应触发组件的 load / error。首屏图片可能在水合前已加载，因此状态读数和事件次数并不等价；请求时机以 Network 为准。

普通加载

useLazy=false，直接使用真实 src，不添加占位 srcset。

普通加载 / 本地测试图片

src: （无）
srcset: （无）
sizes: （无）
currentSrc: （无）
实际尺寸 / 加载状态: 0 × 0 · 等待客户端检查

继续向下滚动，触发懒加载

这段留白用于隔开首屏。滚动前，可以先在页首切换动态图片，检查屏幕外资源是否仍保持占位。

保留 src 的懒加载

初始 src 保留真实地址；进入视口上下 200px 的范围后，移除占位 srcset。

保留 src 的懒加载 / 本地测试图片

[data-app-img-lazy]{display:none!important}

src: （无）
srcset: （无）
sizes: （无）
currentSrc: （无）
实际尺寸 / 加载状态: 0 × 0 · 等待客户端检查

响应式 srcset

触发前使用占位 1x 候选；触发后恢复 480w / 960w 和 sizes，由浏览器选择资源。

响应式 srcset / 本地测试图片

[data-app-img-lazy]{display:none!important}

src: （无）
srcset: （无）
sizes: （无）
currentSrc: （无）
实际尺寸 / 加载状态: 0 × 0 · 等待客户端检查

加载后点击图片打开灯箱；图注中的 "引号" 与 & 字符也用于检查 noscript 属性转义。

灯箱图注："引号" & 特殊字符

src: （无）
srcset: （无）
sizes: （无）
currentSrc: （无）
实际尺寸 / 加载状态: 0 × 0 · 等待客户端检查

动态换图与属性更新

可以在页首先换图，再向下滚动；也可以切换图注结构、清空地址或关闭懒加载。

动态换图与属性更新 / large

[data-app-img-lazy]{display:none!important}

src: （无）
srcset: （无）
sizes: （无）
currentSrc: （无）
实际尺寸 / 加载状态: 0 × 0 · 等待客户端检查

加载失败与恢复

故意使用不存在的图片，触发后应收到 error；修复地址后应能重新加载。

加载失败与恢复 / 本地测试图片

[data-app-img-lazy]{display:none!important}

src: （无）
srcset: （无）
sizes: （无）
currentSrc: （无）
实际尺寸 / 加载状态: 0 × 0 · 等待客户端检查

最近的组件事件

尚未收到事件。也可以重置所有用例后重新观察。

禁用 JavaScript 后刷新，noscript 应显示真实图片且不重复占位。Google 的渲染结果需另用 Search Console 检查，本页的 DOM 读数不代表收录结果。