loading="lazy"不能用于响应式画廊，因其不感知视口变化、不响应srcset切换，易导致小屏加载大图或滚动重复加载；必须结合IntersectionObserver手动匹配设备宽度与data-srcset中的最适源，并严格配合sizes属性和CSS布局才能实现精准自适应。
为什么 loading="lazy" 不能直接用于响应式画廊
浏览器原生的 loading="lazy" 在 <img alt="如何用HTML代码实现响应式画廊中图片的延迟加载与自适应" > 上确实能延迟加载，但它不感知视口变化、不响应 srcset 切换，更不会在图片进入可视区后自动根据设备宽度选最适配的尺寸。画廊中常见“小屏加载大图”或“滚动时反复触发加载”的问题，根源就在这儿。
真正要解决，得靠 IntersectionObserver + 手动控制 src 和 srcset，而不是依赖单个属性。
用 IntersectionObserver 触发加载并匹配 srcset 宽度
核心逻辑是：监听图片是否进入视口 → 获取当前设备像素比（window.devicePixelRatio）和容器宽度 → 从 data-srcset 中选出最接近的源 → 赋给 src 并设置 srcset。
- 把原始地址存在
data-src，多尺寸地址存data-srcset（格式同原生srcset，如"small.jpg 480w, medium.jpg 768w, large.jpg 1200w"） - 观察器阈值设为
0.05（5% 进入即触发），避免用户快速滚动时漏掉 - 加载后立即调用
observer.unobserve(el)，防止重复执行 - 务必检查
el.src是否已存在，避免重复赋值触发二次请求
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
if (img.src) return;
const sizes = img.dataset.srcset.split(',').map(s => s.trim().match(/(\d+)w/));
const width = Math.min(window.innerWidth * window.devicePixelRatio, 1200);
const best = sizes.reduce((a, b) => Math.abs(b[1] - width) < Math.abs(a[1] - width) ? b : a);
const url = img.dataset.srcset.split(',').find(s => s.includes(best[1] + 'w'))?.trim().split(' ')[0];
if (url) {
img.src = url;
img.srcset = img.dataset.srcset;
}
observer.unobserve(img);
}
});
}, { threshold: 0.05 });HTML 结构必须支持 srcset + sizes 才能自适应
只写 srcset 不够，浏览器不知道“这张图在页面里实际占多宽”，没法选对资源。必须配合 sizes 属性告诉浏览器不同断点下的显示宽度。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
- 画廊每项用
<figure></figure>包裹，避免<div> 导致语义丢失或样式塌陷<li> <code>sizes值要跟 CSS 媒体查询一致，比如"(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw" -
data-src存最小可用图（fallback），data-srcset存完整列表，加载前src留空或设为 1×1 占位图 - 别忘了加
alt和decoding="async"提升解码性能
<figure>
<img
data-srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w"
sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"
alt="画廊图片描述"
decoding="async"
>
</figure>移动端 Safari 和旧版 Chrome 的兼容性补丁
Safari 15.4 之前不支持 IntersectionObserver 对 <img alt="如何用HTML代码实现响应式画廊中图片的延迟加载与自适应" > 的 rootMargin 计算；部分 Android Chrome 会忽略 sizes 导致总选最大图。这两个坑必须手动兜底。
- 加
rootMargin: "0px 0px 100px 0px"（下边多观察 100px），弥补 Safari 滚动预测不准 - 对不支持
srcset的环境（IE 或极老安卓），用document.createElement('img').srcset检测， fallback 到data-src - 禁用
transform: scale()或will-change在父容器上，它们会干扰 IntersectionObserver 的边界计算 - 服务端若用 WebP，需在
Accept请求头检测后返回对应格式，否则客户端 JS 无法动态切格式
真正难的不是写几行 JS，而是让 srcset、sizes、IntersectionObserver 和 CSS 布局严丝合缝——少一个环节，图片就可能模糊、拉伸或白屏。尤其是 sizes 值和实际布局宽度偏差超过 20%，自适应基本就失效了。
