多媒体按需加载的核心是“不提前拉取、不白占带宽、不干扰首屏”，通过 preload="none"+load()控制音视频、intersectionobserver+data-src加载图片、srcdoc占位延迟iframe、script[type="text/html"]隔离动态模板，实现真正按需解析与加载。
对多媒体资源做按需加载，核心是“不提前拉取、不白占带宽、不干扰首屏”，让视频、音频、 iframe 等只在真正需要时才开始加载或初始化。这比单纯加 loading="lazy" 更深入，尤其适用于交互触发、滚动进入、用户操作等场景。
视频/音频：用 preload + load() 主动控制
HTML 的 preload 属性只是提示，不是指令。很多情况下写了 preload="auto" 却没加载，是因为浏览器策略或 DOM 状态不满足（比如元素未挂载、src 是 JS 后设、设备开启省电模式等）。
- 推荐做法：初始设
preload="none"，并确保<video></video>已插入 DOM（哪怕visibility: hidden） - 用户触发播放前，再设置
src，立刻调用.load()方法强制发起请求 - 监听
canplaythrough事件（而非loadeddata），它表示缓冲足够播完，更适合判断“是否就绪” - 若需重复加载，先清空
src再重赋值，否则load()不会重新发起请求
图片与背景图：结合 IntersectionObserver + data-src
这是最成熟、兼容性好的懒加载方式，适用于 <img>、<picture></picture> 和 CSS 背景图（通过 JS 动态添加 class 或 style）。
- HTML 中用
data-src存真实地址，src指向一张 1×1 透明占位图 - 用
IntersectionObserver监听元素是否进入视口（支持 rootMargin 设置提前加载距离） - 进入后，把
data-src值赋给src，浏览器自动触发加载；可顺带加上decoding="async"避免解码阻塞主线程 - 背景图懒加载需配合 JS：先不设 background-image，观察到进入视口后再
element.style.backgroundImage = `url(${url})`
iframe 与第三方内容：延迟渲染 + srcdoc 替代
嵌入地图、评论、广告等 iframe 往往体积大、加载慢、还可能执行脚本，极易拖慢页面。
- 初始不写
src，改用srcdoc放一个轻量占位结构（如 loading 文字 + 骨架图） - 用户点击“展开”或滚动到附近时，再把真实
src写入，并移除srcdoc - 对 YouTube、Bilibili 等支持 embed API 的平台，可用
iframe的loading="lazy"（Chrome 76+ 支持），但 iOS Safari 仍不支持，需降级处理
动态模块与模板：用 script[type="text/html"] 或 textarea 隔离解析
当多媒体内容包含 HTML 结构、内联样式、甚至 script 标签（如视频弹幕组件），直接写进 DOM 会导致浏览器立即解析和请求资源。
- 把整段 HTML 包在
<script type="text/html"></script>或<textarea></textarea>中，它们的内容不会被解析、不会触发任何资源加载 - 触发动作（如点击按钮、切换 tab）后，取出其
innerHTML或value，插入目标容器 - 此时浏览器才开始解析其中的
<img>、<video></video>、<link>等，实现真正的“按需解析 + 按需加载”
