HTML中不存在“细节折叠标签”的懒加载机制，组合仅控制视觉展开/收起，不阻止内部资源（如）默认加载；真正延迟加载需用data-src配合toggle事件手动赋值src。
HTML里没有“细节折叠标签”的懒加载机制
HTML标准中不存在名为“细节折叠标签”的原生元素，也没有任何内置的懒加载能力。你可能指的是<details></details> + <summary></summary>组合，但它本身不触发资源懒加载——展开时<details></details>内部的<img alt="HTML文档结构中细节折叠标签的懒加载机制与初次渲染优化" >、<iframe></iframe>或脚本仍会按默认规则加载，不会因为折叠状态而延迟。
常见误解是以为display: none或<details></details>折叠能自动阻止图片请求，实际并非如此：<img src="a.jpg" alt="HTML文档结构中细节折叠标签的懒加载机制与初次渲染优化" >只要被解析到，浏览器就会发起请求，哪怕它父级是<details open="false"></details>或 style="max-width:90%"。
-
<details></details>只是控制视觉展开/收起，不影响资源加载时机 - 内部
<img alt="HTML文档结构中细节折叠标签的懒加载机制与初次渲染优化" >若没设loading="lazy"，且在初始DOM中，就会立即加载 - 用
data-src+ JS监听toggle事件手动赋值src，才是可控方式
details标签内图片怎么真正延迟加载
想让<details></details>里的图片只在用户点击展开后才加载，必须绕过浏览器默认行为，靠JS接管生命周期。核心不是监听滚动，而是监听toggle事件。
- 把
<img alt="HTML文档结构中细节折叠标签的懒加载机制与初次渲染优化" >的src换成data-src，初始不设src - 给
<details></details>加id或class便于定位，例如<details class="lazy-details"></details> - 监听
toggle事件：details.addEventListener('toggle', () => { if (details.open) { img.src = img.dataset.src; } }); - 注意：不要在
toggle回调里重复赋值——检查img.src是否已存在，避免多次触发 - 如果
<details></details>默认open，需在页面加载时同步初始化一次src
初次渲染优化的关键不是折叠，而是资源剥离
单纯用<details></details>包裹内容，对首屏FCP/LCP毫无帮助。真正影响初次渲染的是DOM体积、JS执行阻塞和资源下载优先级。
立即学习“前端免费学习笔记（深入）”；
-
<details></details>内部的<script></script>仍会同步执行（除非defer或async），可能卡住主线程 - 大段HTML文本放在
<details></details>里，仍计入DOM解析时间，不减少初始HTML大小 - 更有效的方式是：把非首屏区块用
fetch()动态加载，再注入到<details></details>体内 - 服务端返回的片段必须纯净——不含
/，只返回<div>...</div>之类结构 - 注入后若含
<script></script>，需手动eval或createScript执行，innerHTML不会自动运行
容易被忽略的兼容性与性能陷阱
细节折叠+懒加载看似简单，但几个点不处理好，反而让页面更慢。
-
<details></details>在IE中完全不支持，Safari 12.1之前也不支持toggle事件，需降级为click模拟 - 用
IntersectionObserver监听<details></details>是否进入视口再预加载，比等用户点击更顺滑，但需设rootMargin提前触发 - 如果
<details></details>里有<iframe></iframe>，loading="lazy"对其无效（尤其首屏内），必须用data-src+onload清理逻辑 - 动态注入HTML后，若含
width/height缺失的<img alt="HTML文档结构中细节折叠标签的懒加载机制与初次渲染优化" >，展开瞬间会引发CLS（布局偏移）
最麻烦的不是怎么写，而是判断哪些内容真该放<details></details>里——如果它承载的是高频访问模块（比如商品参数表），延迟加载反而增加用户等待；只有低频、高体积、明确可推迟的内容才值得这么做。
