图片按需加载核心是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 或超时会导致图片留白。必须主动兜底：

响应式烟草公司HTML5网站模板

响应式烟草公司HTML5网站模板是一款适合提供各种不同种类的优质烟草公司宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 为 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></picture> 结构，需递归处理内部 <source></source> 的 data-srcset