必须用data-src+JS控制显隐：直接写src浏览器立即请求，无法插入加载提示；需设固定宽高、position:fixed遮罩、IntersectionObserver触发（threshold=0.2）、onload+8秒超时兜底、预加载复用及子页postMessage通信。
iframe 加载中提示必须用 data-src + JS 控制显隐
直接写 src 就没机会插手加载过程——浏览器一解析到 src 就立刻发请求，loading 提示根本来不及显示。真正可控的做法是：HTML 里只写 data-src，用 JavaScript 手动赋值 src，并在赋值前后控制遮罩层开关。
常见错误是把 loading 元素放在 iframe 后面、靠 CSS position: absolute 叠上去——这样在 iframe 首次加载完成前，它可能高度为 0 或未触发重排，遮罩层定位错乱或被裁剪。
- 初始 HTML 中的 iframe 必须设固定宽高（如
width="100%" height="400"），或用 CSS 显式声明aspect-ratio，否则占位塌陷 - 遮罩层要用
position: fixed+z-index: 9999，覆盖整个视口，不依赖 iframe 容器定位 - 不要等
DOMContentLoaded再显示遮罩——它触发太晚；应在绑定 Observer 或点击事件时立即showLoading() - 加载完成回调里，先
hideLoading()，再设置iframe.style.display = "block"（如果之前设了display: none）
用 IntersectionObserver 触发加载 + 显示提示最可靠
loading="lazy" 对动态插入、广告位、跨域 iframe 基本无效，且在微信 iOS 和旧 WebView 中直接被忽略。真实项目里，IntersectionObserver 是唯一能兼顾时机可控、兼容性好、可配合业务逻辑（比如用户滚动到可视区才计费）的方案。
关键不是“用了 Observer”，而是参数和清理动作是否到位：
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
threshold别设成0，用0.2（20% 可见即触发），避免用户快速滑过却没加载 - 一旦触发，立刻调用
observer.unobserve(iframe)，否则滚动来回会重复加载 - 触发后先
iframe.src = iframe.dataset.src，再showLoading()；不要反过来，否则可能刚显示就隐藏 - 给 iframe 加
sandbox="allow-scripts"，防止第三方脚本阻塞 onload 事件，导致 loading 一直不消失
iframe 的 onload 事件不可靠，得加超时兜底
iframe.onload 在跨域、资源卡死、子页面死循环时完全不触发，纯靠它隐藏 loading 层等于埋雷。必须搭配定时器兜底，否则用户永远看到转圈。
实操建议：
- 设置
setTimeout(() => hideLoading(), 8000)，8 秒是经验值，覆盖绝大多数慢网+复杂子页场景 - 在
onload回调里先clearTimeout(timeoutId)，避免重复隐藏 - 如果子页面支持 postMessage，可在子页
document.readyState === 'complete'时主动通知父页：window.parent.postMessage({ type: 'iframe-loaded' }, '*')，比 onload 更准 - 对广告类 iframe，加载失败后别只留白——至少 fallback 到一个带文案的
<div>广告加载失败</div>
预加载已访问过的 iframe 页面能彻底消除卡顿感
用户在 tab 间切换、或返回上一页时反复加载同一 iframe，是“第一次加载太卡”的核心原因。解决思路不是优化单次加载，而是让后续加载变成内存复用。
具体怎么做：
- 首次加载完成后，缓存该 iframe 的 DOM 节点（不是内容，是整个
<iframe>元素），并标记data-loaded="true" - 下次切换时，若发现
data-loaded存在，直接iframe.style.display = "block"并showContent()，跳过所有网络请求 - 首屏加载完，用
setTimeout(() => preloadOtherIframes(), 500)异步预加载非首屏 iframe，但要限制并发数（比如最多 2 个），避免抢主线程 - 慎用
srcdoc替代src：它虽免请求，但无法缓存、不能跨域、且大段 HTML 字符串易出 XSS，仅适合极简内联内容
onload 隐藏 loading 是不够的，必须结合子页主动通信或 PerformanceObserver 监控长任务。 
