图片按需加载核心是IntersectionObserver监听视口进入，data-src存地址、进入时赋值src；需处理onerror降级、标记加载状态、noscript降级；响应式用data-srcset/data-sizes延迟写入并decode；动态内容需手动observe新图。
图片按需加载的核心逻辑是“用户即将看到时才加载”，IntersectionObserver 正是为此而生——它不监听 scroll、不计算位置、不触发重排，只在浏览器异步判定元素进入视口区域时精准回调。
基础绑定：用 data-src 存地址，进入视口再赋值 src
这是最常用也最稳妥的起点。所有待懒加载的 <img> 都应具备 data-src 属性，src 可为空或指向 1×1 占位图（避免预加载）：
- 初始化时遍历
document.querySelectorAll('img[data-src]') - 创建
IntersectionObserver实例，配置rootMargin: '100px'（提前 100px 开始请求，防滚动过快白屏） - 回调中检查
entry.isIntersecting === true，仅此时才执行img.src = img.dataset.src - 立即调用
observer.unobserve(img)，防止重复加载
增强健壮性：处理失败、降级与状态标记
真实网络环境不可靠，404 或超时会导致图片留白。必须主动兜底：
- 为
img绑定onerror：加载失败时回退到占位图，如img.onerror = () => img.src = '/placeholder.svg' - 加载成功后移除
data-src或添加data-loaded="true"，后续可跳过重复 observe - 若 JS 未执行，HTML 中保留
<noscript><img src="..."></noscript>作为服务端降级
适配响应式：延迟写入 srcset/sizes 并异步解码
直接写死 src 会丢失设备像素比和屏幕宽度适配能力。更优做法是把响应式信息也存在 data- 属性里：
- HTML 中设置：
<img data-srcset="a-1x.jpg 1x, a-2x.jpg 2x" data-sizes="(max-width: 768px) 100vw, 50vw"> - 进入视口后同步写入：
img.srcset = img.dataset.srcset; img.sizes = img.dataset.sizes - 调用
img.decode().catch(() => {})异步解码，避免阻塞渲染（现代浏览器支持）
应对动态内容：分页/插入新图时手动 observe
初始页面加载完的图片可以一次性绑定，但通过 AJAX 分页、搜索过滤或拖拽新增的图片不会自动被观察：
- 每次插入新
<img data-src>后，立即执行observer.observe(newImg) - 避免在 DOMContentLoaded 前就运行 observe，确保目标元素已挂载
- 对
<picture>结构，需递归处理内部<source>的data-srcset
