请教：如何实现网站加载页在背景视频加载完成后淡出？

当然可以实现！原来的$(window).on('load')会等待页面所有资源（包括图片、脚本、样式等）加载完成后触发，但我们可以直接监听背景视频的加载事件，精准控制加载页的淡出时机。

单背景视频场景 #

如果页面只有一个背景视频，直接监听视频的loadeddata或canplaythrough事件即可：

方案1：监听视频首帧加载完成（loadeddata） #

当视频的第一帧已加载并就绪时触发，适合不需要完全加载整个视频就想隐藏加载页的场景：

// 替换成你实际的背景视频选择器，比如.video-bg
$('.video-bg').on('loadeddata', function() {
  $('.loading').fadeOut(500);
});

方案2：监听视频可流畅播放完成（canplaythrough） #

当浏览器判断视频可以不中断地播放至结束时触发，适合需要确保视频完全加载完成的场景：

$('.video-bg').on('canplaythrough', function() {
  $('.loading').fadeOut(500);
});

多背景视频场景 #

如果页面有多个背景视频，需要等所有视频都加载完成后再隐藏加载页，可以用计数器来实现：

const $videos = $('.video-bg'); // 所有背景视频的选择器
let loadedVideoCount = 0;
const totalVideos = $videos.length;

// 监听每个视频的加载完成和错误事件（避免加载失败导致加载页一直显示）
$videos.on('loadeddata error', function() {
  loadedVideoCount++;
  // 当所有视频都加载完成（或失败）时，隐藏加载页
  if (loadedVideoCount === totalVideos) {
    $('.loading').fadeOut(500);
  }
});

额外注意事项 #

• 给视频元素添加preload="auto"属性，确保浏览器会预加载视频内容，避免事件迟迟不触发；
• 如果视频是动态插入到页面中的，需要在视频元素插入DOM后再绑定事件，否则监听不到；
• 兼容旧浏览器的话，可以额外监听loadedmetadata事件（视频元数据加载完成时触发）作为补充。

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