长图分段懒加载核心是按需换源与及时释放，非切图；用IntersectionObserver监听分段进入视口（rootMargin: "200px"）动态设置src，离开时清空或置占位符，配合srcset/sizes响应式选图、主动释放内存及fallback降级保障体验。
长图分段懒加载不是把一张图切几份再挨个加载，而是让浏览器只加载当前可视区域附近的那一段，滚动时动态替换 src，同时防止内存堆积。关键不在“切图”，而在“按需换源”和“及时释放”。
用 IntersectionObserver 控制分段加载时机
原生 loading="lazy" 对长图无效——它只适用于独立 <img> 元素，而长图通常是一个完整 DOM 节点，高度远超视口。必须手动监听滚动位置：
- 将长图按逻辑段落划分（如每屏高度为单位），给每段设置唯一
data-section属性 - 用
IntersectionObserver监听各段进入视口（rootMargin: "200px"提前触发） - 仅当某段进入视口时，才把对应真实图片 URL 写入该段的
src；离开视口后，可清空src或设为透明占位符（如data:image/gif;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs=） - 避免用
scroll事件监听——高频触发易卡顿，IO是浏览器原生优化过的
用 srcset + sizes 配合容器宽度选最小可用图
即使分段，每段仍需响应式：手机看 375px 宽的图，桌面可能要 1200px 宽。但长图每段不能各自配一套全尺寸资源，否则体积爆炸。正确做法是：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 每段容器用 CSS 固定宽度比例（如
width: 100%; aspect-ratio: 4/5;），并设max-width限制上限 -
sizes按实际渲染宽度写，例如：sizes="(max-width: 767px) 100vw, (max-width: 1200px) 720px, 960px" -
srcset只提供 3–4 个真实断点（如375w, 750w, 1200w, 1920w），对应你 CSS 媒体查询中真正生效的宽度 - 禁止堆砌冗余尺寸（如从 320w 到 3840w 每 100w 一个），浏览器会预解析全部候选，徒增开销
滚动中主动释放不用的图片内存
浏览器不会自动回收已加载但已移出视口的 <img> 解码图像数据，尤其在 iOS Safari 上极易 OOM。必须人工干预：
- 监听
intersectionRatio < 0.1（几乎完全离开视口）时，执行img.src = ""或指向极小占位图 - 对已卸载的段，调用
img.decode().catch(() => {})后再清空，避免解码队列堆积 - 慎用
object-fit: cover+ 高宽不定容器——它不释放内存，还可能触发重绘；优先用固定aspect-ratio+overflow: hidden - 在页面隐藏（
visibilitychange）或用户长时间停留后，批量清理非活跃段的src
兜底与降级：确保不白屏、不卡死
分段加载失败时，用户看到的是空白或错位，体验比慢更差。必须有 fallback 机制：
- 每段默认用 base64 极简占位图（
1×1gif 或 svg），保证 DOM 渲染结构稳定，防 layout shift - 加载失败时，显示带重试按钮的提示层，并记录错误（如格式不支持、404）
- 低端设备或内存紧张时（通过
navigator.deviceMemory < 2或performance.memory判断），自动降级为单张全图 + 普通懒加载 - 服务端配合：CDN 开启 WebP/AVIF 自动转码，客户端只需传原始路径，由图床实时生成适配尺寸
