<details>标签内loading="lazy"无效，因为该属性仅响应滚动触发的懒加载，不感知<details>的toggle事件；内部<img>即使折叠也会被浏览器解析并立即请求，必须用data-src配合IntersectionObserver监听isIntersecting && open双条件才可靠加载。
details 标签里 loading="lazy" 为什么无效
因为 <details> 默认不触发浏览器的懒加载感知机制：它的 <summary> 展开前，内部内容（包括 <img>）虽然在 DOM 中，但未进入视口，且部分浏览器（如 Chrome）对非“滚动驱动”的延迟渲染场景（比如 details 的 toggle）不主动触发 loading="lazy" 的加载逻辑。你加了 loading="lazy"，图片仍可能在页面加载时就发起请求。
用 IntersectionObserver 手动控制图片加载
这是目前最可靠的方式——监听 <details> 元素是否展开 + 是否进入视口，双条件满足后再设置 src。关键点：
-
<img>初始只写data-src，不写src，避免预加载 - 监听
details的toggle事件，但仅靠它不够（用户可能展开但元素还在屏幕外） - 用
IntersectionObserver观察details自身，isIntersecting === true且open === true时才加载图片 - 观察器需设
threshold: 0.01（而非0），避免因小数精度导致不触发
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
const details = entry.target;
const img = details.querySelector('img[data-src]');
if (entry.isIntersecting && details.open && img) {
img.src = img.dataset.src;
img.removeAttribute('data-src');
observer.unobserve(details);
}
});
}, { threshold: 0.01 });
document.querySelectorAll('details').forEach(d => observer.observe(d));
注意 details 展开时的布局抖动问题
图片加载后尺寸变化会引发重排，尤其当 <details> 内容高度未知时。解决办法：
- 给
<img>显式设置width和height属性（响应式场景可用aspect-ratio） - 避免用
max-width: 100%却不设height: auto—— 这会导致加载前高度为 0，展开后突然撑开 - 如果图片尺寸完全不可控，可在 JS 加载前先占位：
<img style="visibility:hidden;">，加载完成再移除样式
兼容性与降级处理
老版本 Safari（IntersectionObserver 对 details 的精准触发；IE 完全不支持 details。所以：
立即学习“前端免费学习笔记（深入）”；
- 用
if ('IntersectionObserver' in window)包裹观察器逻辑 - 降级方案：监听
window.onscroll+getBoundingClientRect()手动判断，但性能差、易漏，仅作 fallback - 不支持
details的浏览器（如 IE），建议用 JS 模拟展开行为，并统一走懒加载逻辑
真正麻烦的是「展开但不在视口」和「在视口但未展开」两种状态的交叉判断——漏掉任一条件，懒加载就失效。别只测展开瞬间，要滚动到边缘再展开，反复验证。
