页面加载过慢时如何隐藏指定元素并切换显示替代元素？

以下方案无额外依赖，兼容所有主流前端场景，兜底逻辑完善：

基础实现方案（原生JS通用版） #

核心逻辑为默认优先展示静态背景Header，视频加载成功后再做切换，避免用户首屏看到空白内容，同时加入超时、加载错误双重兜底。

1. HTML结构 #

<!-- 静态背景Header：默认展示 -->
<header id="static-header" style="background: url('你的静态背景图地址') center/cover no-repeat; height: 100vh;">
  <!-- 此处放置导航、标题等Header公共内容 -->
</header>

<!-- 视频背景Header：默认隐藏 -->
<header id="video-header" style="display: none; height: 100vh; position: relative;">
  <video 
    id="bg-video"
    autoplay 
    muted 
    loop 
    playsinline 
    preload="auto"
    poster="你的静态背景图地址"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;"
  >
    <source src="你的背景视频地址" type="video/mp4">
  </video>
  <!-- 此处放置和静态Header完全一致的公共内容，保证切换无感知 -->
</header>

2. 控制逻辑JS #

const bgVideo = document.getElementById('bg-video')
const staticHeader = document.getElementById('static-header')
const videoHeader = document.getElementById('video-header')
const MAX_WAIT_TIME = 3000 // 自定义最长等待时间，单位为毫秒，此处设为3秒

let isVideoLoaded = false

// 监听视频加载完成，切换为视频Header
bgVideo.addEventListener('loadeddata', () => {
  isVideoLoaded = true
  staticHeader.style.display = 'none'
  videoHeader.style.display = 'block'
})

// 监听视频加载错误，保留静态Header即可
bgVideo.addEventListener('error', () => {
  console.log('背景视频加载失败，已降级为静态背景')
})

// 超时兜底：超过等待时间未加载完成，终止加载，保留静态Header
setTimeout(() => {
  if (!isVideoLoaded) {
    bgVideo.pause()
    console.log('背景视频加载超时，已降级为静态背景')
  }
}, MAX_WAIT_TIME)

进阶优化（可选） #

如果需要对弱网用户提前做判断，避免无意义的视频资源请求，可以加入Network Information API做渐进增强判断，不兼容的老旧浏览器不会影响原有逻辑：

if ('connection' in navigator) {
  const networkInfo = navigator.connection
  // 检测到2G网络或用户开启了省流模式，直接移除视频元素，不发起视频请求
  if (networkInfo.effectiveType === '2g' || networkInfo.saveData) {
    bgVideo.remove()
  }
}

额外优化建议 #

• 提前压缩背景视频资源，尽量控制大小在5MB以内，降低加载失败概率
• 两个Header的公共内容、布局完全一致，避免切换时出现视觉跳动
• 若使用Vue/React等前端框架，只需将上述DOM显示切换逻辑替换为框架的状态控制逻辑即可，核心监听、超时逻辑完全通用

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