如何使用JavaScript检测GIF动画完成一次播放？

可以实现，但原生JS没有内置的GIF循环检测事件，我们需要通过逐帧对比像素数据的方式判断循环点——当GIF播放完一轮回到起始帧时，当前帧的像素会和第一帧完全一致，这时就触发你的视频加载检查脚本。

完整实现代码 #

下面是整合了你的视频加载逻辑的完整代码：

// 获取页面元素
const videoElement = document.getElementById('video');
const preloader = document.getElementById('preloader');
const gifElement = document.getElementById('preloader-gif'); // 替换成你的GIF元素ID

// 复用你的视频加载检查逻辑
function checkVideoLoaded() {
  if (videoElement.readyState >= 3) {
    console.log("视频加载完成");
    preloader.style.display = 'none';
    // 视频加载完成后停止GIF检测，节省性能
    stopGifDetection();
  }
}

// 保留原有的视频加载监听
videoElement.addEventListener('loadeddata', checkVideoLoaded);

// GIF循环检测相关变量
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
let firstFramePixels = null;
let checkTimer = null;

// 初始化GIF检测：获取第一帧像素数据
function initGifDetection() {
  // 同步GIF尺寸到canvas
  canvas.width = gifElement.naturalWidth;
  canvas.height = gifElement.naturalHeight;
  // 绘制并保存第一帧的像素数据
  ctx.drawImage(gifElement, 0, 0);
  firstFramePixels = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
  // 启动定时检测
  checkTimer = setInterval(checkGifLoop, 80); // 检测间隔可根据GIF帧率调整，比如24帧/秒设40ms
}

// 检查GIF是否完成一轮循环
function checkGifLoop() {
  // 绘制当前GIF帧到canvas
  ctx.drawImage(gifElement, 0, 0);
  const currentFramePixels = ctx.getImageData(0, 0, canvas.width, canvas.height).data;

  // 对比当前帧和第一帧的所有像素
  let loopEnded = true;
  for (let i = 0; i < firstFramePixels.length; i++) {
    if (firstFramePixels[i] !== currentFramePixels[i]) {
      loopEnded = false;
      break;
    }
  }

  // 循环结束时触发视频加载检查
  if (loopEnded) {
    checkVideoLoaded();
  }
}

// 停止GIF检测的辅助函数
function stopGifDetection() {
  if (checkTimer) {
    clearInterval(checkTimer);
    checkTimer = null;
  }
}

// 页面加载完成后初始化检测
window.addEventListener('load', initGifDetection);

关键细节说明 #

• 像素对比逻辑：GIF循环结束必然回到起始帧，像素数据完全一致，这是最可靠的判定方式
• 检测间隔调整：根据你的GIF帧率设置合适的间隔，比如10帧/秒的GIF设100ms，24帧/秒设40ms，平衡精准度和性能
• 性能优化：视频加载完成后立即停止GIF检测，避免不必要的canvas绘制和像素计算
• 元素ID替换：记得把代码里的preloader-gif改成你实际的GIF元素ID

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