HTML网页多媒体元素延迟加载的实现代码-html教程-PHP中文网

img的loading="lazy"足够且推荐，video的该属性仅chrome 120+支持且只作用于poster图，不控制视频主体加载，真正懒加载video需用intersectionobserver手动控制src赋值时机。

html网页多媒体元素延迟加载的实现代码

img 和 video 的 loading="lazy" 属性是否足够？

对大多数静态图片和内联视频，loading="lazy" 是最轻量、浏览器原生支持的延迟加载方案。但它只对 <img> 和 <iframe></iframe> 全面生效；<video></video> 在 Chrome 120+ 才开始支持该属性，且仅作用于 poster 图片，不控制视频资源本身是否懒加载。

常见错误是给 <video></video> 写上 loading="lazy" 就以为视频文件不会提前下载——实际它仍可能触发 preload（尤其当 preload="auto" 或未显式设为 none 时）。

<img src="photo.jpg" loading="lazy"> ✅ 安全可用，兼容性好（Chrome 76+、Firefox 75+、Safari 15.4+）
<video poster="thumb.jpg" loading="lazy" preload="auto"></video> ❌ loading 不影响视频主体，preload="auto" 会立即拉取视频数据
真正要懒加载视频，必须手动控制 src 或 source 的赋值时机

用 IntersectionObserver 懒加载 video 和 iframe

这是目前最可靠、可精确控制加载时机的方式。核心逻辑：监听元素是否进入视口，进入后再设置 src 或 srcdoc，避免提前请求资源。

注意点：

IntersectionObserver 回调中不要直接操作 DOM 多次，尤其避免重复设置 src（已加载过的 video 再设一次会重载）
需在首次进入后调用 unobserve()，否则持续监听无意义
对 <iframe></iframe>，若含第三方脚本（如 YouTube），建议加 allow="accelerometer; gyroscope; picture-in-picture" 保证功能完整

示例（懒加载 video）：

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

const lazyVideos = document.querySelectorAll('video[data-src]');
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const video = entry.target;
      const src = video.dataset.src;
      if (src && !video.src) {
        video.src = src;
        video.load(); // 触发元数据加载，必要时再 play()
        observer.unobserve(video);
      }
    }
  });
});

lazyVideos.forEach(v => observer.observe(v));

audio 和 canvas 动态资源怎么懒加载？

<audio></audio> 没有 loading 属性，且默认 preload="metadata" 就会拉取音频头信息（约几十 KB），对移动端流量敏感场景需干预；<canvas></canvas> 本身不加载资源，但常配合 Image 或 WebAssembly 模块，这些才是真正的加载目标。

audio：显式设 preload="none"，并在需要播放前才设置 src 并调用 load()
canvas 图片资源：用 new Image() + onload 加载，而非直接写死 src；或结合 IntersectionObserver 控制加载时机
WebAssembly 模块：延迟到用户交互（如点击按钮）再 fetch() + WebAssembly.instantiateStreaming()