图片懒加载与动效需协同：进视口才请求，加载完成再触发动效；首屏图禁用loading="lazy"，改用preload+webp压缩；动效绑定load事件，失败兜底；intersectionobserver预加载提升流畅度；骨架屏、固定尺寸、aspect-ratio保障布局稳定。
在移动端 H5 中，图片懒加载 + 动效延时加载不是简单叠加，而是要让“资源加载时机”和“用户感知节奏”对齐。核心是：图片进视口才请求，但动效要在图片加载完成后再触发——既不白屏、也不闪跳、还不卡顿。
优先用原生 loading="lazy" 打底，但首屏图必须绕过它
现代安卓 Chrome、iOS Safari（15.4+）都支持 loading="lazy"，写法极简：
<img src="banner.jpg" alt="活动主图" loading="lazy">
⚠️ 注意：首屏关键图（如 banner、主视觉、CTA 按钮图）绝不能加 loading="lazy"，否则会拖慢 LCP（最大内容绘制），反而拉低性能评分。它们该用 <link rel="preload"> 提前拉取：
<link rel="preload" as="image" href="banner.webp">
同时搭配 WebP 格式 + 尺寸压缩，确保首屏图片总大小控制在 100KB 内。
动效延时加载：等图加载完再进场，不是等滚动到就动
很多页面一滚动就立刻触发动效，但此时图片可能还在 loading.gif 阶段，造成“动效先跑、图后到”的割裂感。正确做法是把动效绑定在图片的 load 事件上：
- 给图片加 class：
<img src="loading.gif" class="lazy-img fade-in"> - 监听
load而非isIntersecting：
图片加载成功后，再添加animate类或触发 CSS 动画 - 失败兜底：
onerror时替换为占位图，并仍允许动效执行，避免空白断层
这样用户看到的是“图稳了 → 动效起”，视觉连贯性大幅提升。
IntersectionObserver 做预加载缓冲，提升滚动跟手度
单纯等图片“刚进视口”才加载，在快速滑动时容易出现空白。建议用 IntersectionObserver 设置 rootMargin 提前加载：
const observer = new IntersectionObserver(callback, {<br> rootMargin: '200px' // 提前 200px 开始加载<br>});
配合动效延时逻辑，就能实现：滚动未到 → 图已加载中 → 图一到位 → 动效即刻启动。实测在中低端安卓机上，比纯 scroll 监听节流方案更平滑、内存占用更低。
骨架屏 + 占位尺寸 + aspect-ratio，三者缺一不可
懒加载若不做布局保护，图片加载瞬间会引发页面重排（reflow），导致文字跳动、按钮位移，破坏体验。必须做到：
- 所有懒加载图片设固定宽高，或用 CSS
aspect-ratio: 16/9锁定比例 - 首屏区域用骨架屏占位，不依赖图片渲染来撑开结构
- 避免用
height: auto或 JS 动态计算高度，移动端回流代价高
这样即使图片延迟几秒，用户看到的也是稳定结构 + 渐进式填充，而不是“文字先堆满、图一来全往下挤”。
