核心在于让占位符轻量且视觉合理，精准触发加载：需预设宽高比防抖动、嵌入低质可识别缩略图、提供语义化fallback；intersectionobserver按设备动态配置rootmargin与threshold；切换过程含微交互动线；兼容性兜底采用loading="lazy"优先、requestidlecallback次之，并全量支持srcset响应式。
核心在于让占位符既轻量又具备视觉合理性，同时确保真实图片在用户“即将看到”时精准触发加载——不早、不晚、不卡顿。
占位符需承载三重信息
单纯用 base64 透明 GIF 或纯色背景会丢失关键视觉线索。理想占位符应包含：
- 宽高比预设：通过 padding-top 百分比或 aspect-ratio CSS 属性锁定容器比例，防止布局抖动（layout shift）
- 低质但可识别的缩略图：比如 10–20KB 的 WebP 格式模糊图（Blur-up），保留主色调与构图轮廓
- 语义化 fallback：alt 文本 + aria-hidden="true" 配合 loading="eager" 的 SVG 占位图标（如相机剪影），兼顾可访问性与首屏渲染速度
IntersectionObserver 配置要匹配用户行为
默认 threshold: 0 和 rootMargin: '0px' 容易导致“刚露头才加载”，产生明显空白。应按设备与场景动态调整：
- 移动端快速滑动场景：rootMargin 设为 '0px 0px 400px 0px'（向下扩展 400px），提前触发加载
- 桌面端慢速浏览：threshold 使用数组 [0.05, 0.25, 0.5]，在 5% 可见时开始解码、25% 时开始 fetch、50% 时完成渲染
- 带骨架屏的页面：可将 rootMargin 改为 '200px'，配合 CSS transition 实现平滑渐显
切换过程必须可控且可感知
从占位符到真实图不是简单赋值 src，而是一套微交互动线：
- 加载中：添加 loading 类，启用 CSS opacity 过渡 + 模糊滤镜（filter: blur(2px)）营造“正在解析”感
- 加载成功：移除 loading 类，用 will-change: transform 提前提示浏览器准备合成层，避免回流
- 加载失败：自动降级为 SVG 占位图标，并记录 error 事件供监控；不显示 broken image 图标
- 对已加载图片调用 observer.unobserve(img)，释放内存，避免重复回调
兼容性兜底不等于降级体验
当 IntersectionObserver 不可用（如旧版 Safari 或 WebView），不应退回 scroll 监听+getBoundingClientRect 计算——这会引发强制同步布局。更优策略是：
- 用 loading="lazy" 原生属性作为第一层兜底（Chrome 76+、Firefox 75+、Safari 15.4+ 已支持）
- 对不支持 loading="lazy" 的环境，采用 requestIdleCallback + setTimeout 回退：滚动停止后 100ms 内，在浏览器空闲时段批量检查可见性
- 所有占位符均使用 srcset + sizes 预声明响应式尺寸，确保即使 JS 失效，基础图片也能按视口适配
