本文介绍通过按屏幕宽度条件加载特定 iframe 的方法，避免在移动设备或小屏上加载大尺寸 360° 全景内容，显著降低首屏渲染压力与资源消耗，提升页面响应速度与用户体验。

本文介绍通过按屏幕宽度条件加载特定 iframe 的方法，避免在移动设备或小屏上加载大尺寸 360° 全景内容，显著降低首屏渲染压力与资源消耗，提升页面响应速度与用户体验。

在构建响应式网站时，嵌入重型交互式内容（如基于 Pannellum 的 360° 全景图）常导致性能瓶颈：iframe 默认会立即加载其 src，即使用户从未滚动到该区域，也会抢占带宽、阻塞主线程、拖慢首屏渲染，并在后台持续消耗 CPU 和内存——尤其当同一页面为不同断点（如手机/平板/桌面）准备了多个尺寸版本的 iframe 时，问题更为突出。

理想的解决方案是：仅在匹配当前视口宽度的对应 iframe 需要展示时，才动态注入其真实 URL；其余 iframe 始终保持 src="about:blank" 或为空，彻底避免无谓加载。以下为推荐实现方式（兼容现代浏览器，无需 jQuery，但保留原方案逻辑供参考）：

✅ 推荐方案：原生 JavaScript + 响应式条件加载

<!-- 预留占位 iframe，初始 src 为空 -->
<iframe 
  id="pannellum-frame-mobile" 
  src="about:blank" 
  width="100%" 
  height="500" 
  frameborder="0" 
  aria-hidden="true"
  style="display:none;"
></iframe>

<iframe 
  id="pannellum-frame-tablet" 
  src="about:blank" 
  width="100%" 
  height="600" 
  frameborder="0" 
  aria-hidden="true"
  style="display:none;"
></iframe>

<iframe 
  id="pannellum-frame-desktop" 
  src="about:blank" 
  width="100%" 
  height="700" 
  frameborder="0" 
  aria-hidden="true"
  style="display:none;"
></iframe>

// 页面就绪后，根据视口宽度动态加载对应 iframe
function loadResponsiveIframe() {
  const width = window.innerWidth;
  const mobileFrame = document.getElementById('pannellum-frame-mobile');
  const tabletFrame = document.getElementById('pannellum-frame-tablet');
  const desktopFrame = document.getElementById('pannellum-frame-desktop');

  // 清空所有 iframe src（确保仅一个生效）
  [mobileFrame, tabletFrame, desktopFrame].forEach(el => {
    el.src = 'about:blank';
    el.style.display = 'none';
  });

  // 按断点分配真实 URL（请替换为你的 Pannellum 实际地址）
  if (width <= 480) {
    mobileFrame.src = 'https://your-site.com/360-mobile.html';
    mobileFrame.style.display = 'block';
  } else if (width <= 768) {
    tabletFrame.src = 'https://your-site.com/360-tablet.html';
    tabletFrame.style.display = 'block';
  } else {
    desktopFrame.src = 'https://your-site.com/360-desktop.html';
    desktopFrame.style.display = 'block';
  }
}

// 页面加载完成时执行一次
document.addEventListener('DOMContentLoaded', loadResponsiveIframe);

// 可选：监听窗口大小变化（如横竖屏切换），但注意防抖
let resizeTimer;
window.addEventListener('resize', () => {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(loadResponsiveIframe, 250);
});

⚠️ 关键注意事项

• 避免重复加载：每次仅激活一个 iframe，其余保持 about:blank，杜绝多 iframe 同时运行造成的资源争抢；
• 无障碍友好：添加 aria-hidden="true" 明确告知屏幕阅读器该 iframe 不含关键语义内容（若含重要信息，请改用 aria-labelledby 并提供文字描述）；
• 首屏优先：将 <script></script> 放置在