如何使用JavaScript统计GIF动画循环次数并实时展示该计数

目前主流有两种实现思路，可根据你的精度需求选择：

方案1：计时法（低开发成本，适合普通场景） #

这种方案核心是先获取GIF单次完整循环的总时长，之后用定时器按周期更新计数即可。
实现步骤：

• 用轻量GIF解析库读取GIF所有帧的延迟值，求和得到单次循环总时长loopDuration（单位：毫秒）
• 页面中添加计数展示元素，初始化计数变量let loopCount = 0
• 监听GIF加载完成事件，启动间隔为loopDuration的定时器，每次触发时将计数加1并更新页面显示
  示例代码：

<img id="targetGif" src="your.gif" alt="目标GIF">
<p>已循环次数：<span id="counter">0</span></p>
<script>
const gifEl = document.getElementById('targetGif');
const counterEl = document.getElementById('counter');
let loopCount = 0;
// 此处替换为你解析得到的GIF实际单次循环总时长，示例为3200毫秒
const loopDuration = 3200;

gifEl.addEventListener('load', () => {
  setInterval(() => {
    loopCount++;
    counterEl.textContent = loopCount;
  }, loopDuration);
});
</script>

说明：该方案存在微小误差，误差来源为首帧渲染延迟、页面后台定时器降频，普通场景下完全可用

方案2：Canvas重绘法（零误差，适合高精度要求场景） #

如果要求计数完全精准，可自行解析GIF帧数据，用Canvas手动逐帧播放，每次播完所有帧就算完成一次循环。
实现逻辑：

• 用GIF解析库拆解出GIF的所有帧数据、每帧的延迟时长
• 用requestAnimationFrame或setTimeout按帧延迟逐帧绘制到Canvas上
• 所有帧绘制完成后，计数加1更新页面，再从头开始循环绘制
  核心代码片段：

const canvas = document.getElementById('gifCanvas');
const ctx = canvas.getContext('2d');
const counterEl = document.getElementById('counter');
let frames = []; // 存储解析得到的所有帧数据，包含每帧的像素信息、延迟时间
let currentFrameIndex = 0;
let loopCount = 0;

function playGif() {
  const currentFrame = frames[currentFrameIndex];
  // 绘制当前帧
  ctx.putImageData(currentFrame.data, 0, 0);
  currentFrameIndex++;
  
  // 判断是否完成一次循环
  if (currentFrameIndex >= frames.length) {
    loopCount++;
    counterEl.textContent = loopCount;
    currentFrameIndex = 0;
  }
  // 按当前帧的延迟时间调度下一帧
  setTimeout(playGif, currentFrame.delay);
}

// GIF解析完成后调用启动播放
// parseGif(yourGifBuffer).then(parsedFrames => { frames = parsedFrames; playGif(); })

优势：完全和原生GIF播放效果一致，计数零误差，不受页面后台休眠影响。

补充说明 #

如果你的GIF本身设置了有限循环次数，解析GIF元数据时可以读取到最大循环次数，达到阈值后停止计数即可。

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