如何配置Intersection Observer优化音频懒加载以规避大网络负载

核心问题 #

• 页面加载时会等待MP3文件的首批字节下载完成（返回206部分内容状态码），导致页面整体加载缓慢
• 尝试用Intersection Observer实现懒加载，但MP3完全不下载，即使在播放器显示后设置监听也无效

问题根源 #

1. 监听时机错误：DOMContentLoaded触发时，audio标签所在的#player容器还处于hide状态（通常是display: none类），Intersection Observer无法检测隐藏元素的交叉状态，因此不会触发加载逻辑
2. AudioContext提前初始化：在audio元素还未设置真实src时就创建了AudioContext并关联元素，干扰了后续的加载流程
3. 未明确禁用预加载：默认情况下浏览器可能会提前尝试加载音频资源，绕开懒加载逻辑

修正方案 #

1. 调整监听时机

等播放器容器（#player）显示后，再初始化Intersection Observer，确保能正确检测audio元素的视口交叉状态

2. 延迟播放器控制初始化

等音频资源加载完成后，再创建AudioContext并绑定控制逻辑，避免无效绑定

3. 禁用预加载

给audio标签添加preload="none"属性，明确告诉浏览器不要提前加载资源

修改后的完整代码 #

HTML部分

<div class="player">
  <div class="hide animated" id="player">
    <!-- 添加preload="none"禁止浏览器预加载 -->
    <audio data-src="https://some.com/track.mp3" preload="none"></audio>
  </div>
  <div class="circle-spin" id="loaderSpinner" role="status"></div>
</div>

JavaScript部分

// 加载动画控制：页面加载完成后显示播放器
window.addEventListener("load", function(){
  const loaderSpinner = document.getElementById("loaderSpinner");
  const playerContainer = document.getElementById("player");
  
  loaderSpinner.style.display = "none";
  playerContainer.classList.remove('hide');
  
  // 播放器显示后，才初始化音频懒加载监听
  initAudioLazyLoad();
});

// 音频懒加载核心逻辑
function initAudioLazyLoad() {
  const mp3 = document.querySelector('audio');
  if (!mp3) return;

  const io = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (!entry.isIntersecting) return;
      
      // 设置真实src，触发音频下载
      entry.target.src = entry.target.getAttribute('data-src');
      
      // 音频元数据加载完成后，初始化播放器控制
      entry.target.addEventListener('loadedmetadata', initPlayerControls);
      
      // 停止监听当前元素
      io.unobserve(entry.target);
    })
  }, {
    // 可选：元素进入视口10%时开始加载，提前缓冲
    threshold: 0.1
  });

  io.observe(mp3);
}

// 播放器控制初始化（延迟到音频加载后）
function initPlayerControls() {
  const audioElement = this;
  const audioCtx = new AudioContext();
  const track = audioCtx.createMediaElementSource(audioElement);
  
  // 这里写入你的播放器自定义控制逻辑...
  
  // 初始化播放时间等参数
  setTimes();
}

// 播放时间设置函数
function setTimes() {
  // 你的时间设置逻辑...
}

额外提示 #

• preload="none"是懒加载生效的关键，必须添加，否则浏览器可能会提前加载音频
• loadedmetadata事件确保音频的时长等元数据加载完成后再初始化控制，避免出现获取信息失败的问题
• 可以调整threshold参数，比如设置为0表示元素刚进入视口就开始加载，设置为0.5表示元素一半进入视口时加载，根据需求灵活调整

内容的提问来源于stack exchange，提问作者rocco