如何使用JavaScript获取GIF图片时长并实现单次播放

固定延时隐藏的方案无法适配不同时长GIF，核心原因是没有获取到GIF本身的实际播放总时长，可选择以下任意方案解决：

方案1：修改GIF源文件（零代码成本） #

如果有权限修改GIF源文件，导出时直接设置循环次数为1，浏览器会原生支持仅播放一次，播放结束后自动停在最后一帧，无需额外编写JS控制逻辑。

方案2：原生解析GIF元数据获取时长（无第三方依赖） #

通过解析GIF二进制文件的帧延时信息，累加得到GIF总播放时长，再设置对应延时即可适配所有GIF：

// 解析GIF二进制获取总时长，单位：毫秒
async function getGifDuration(gifUrl) {
  const response = await fetch(gifUrl);
  const buffer = await response.arrayBuffer();
  const uint8Arr = new Uint8Array(buffer);
  let totalDuration = 0;
  let offset = 6; // 跳过GIF头标识（GIF89a/GIF87a共6字节）

  offset += 7; // 跳过逻辑屏幕描述符
  // 跳过全局颜色表（如果存在）
  const hasGlobalColorTable = !!(uint8Arr[10] & 0x80);
  if (hasGlobalColorTable) {
    const globalColorTableSize = uint8Arr[10] & 0x07;
    offset += 3 * (2 ** (globalColorTableSize + 1));
  }

  // 遍历所有数据块
  while (offset < uint8Arr.length) {
    const blockType = uint8Arr[offset];
    // 匹配图形控制扩展块，存储单帧延时
    if (blockType === 0x21 && uint8Arr[offset + 1] === 0xf9) {
      // 帧延时单位为1/100秒，转毫秒乘10
      const frameDelay = (uint8Arr[offset + 4] | (uint8Arr[offset + 5] << 8)) * 10;
      totalDuration += frameDelay;
      offset += 8;
    } else if (blockType === 0x2c) { // 图像描述符块
      offset += 10;
      const hasLocalColorTable = !!(uint8Arr[offset + 8] & 0x80);
      if (hasLocalColorTable) {
        const localColorTableSize = uint8Arr[offset + 8] & 0x07;
        offset += 3 * (2 ** (localColorTableSize + 1));
      }
      offset += 1;
    } else if (blockType === 0x3b) { // GIF结束标识，终止遍历
      break;
    } else { // 跳过其他无关块
      offset += 1;
      while (offset < uint8Arr.length && uint8Arr[offset] !== 0) {
        offset += uint8Arr[offset] + 1;
      }
      offset += 1;
    }
  }
  return totalDuration;
}

// 业务逻辑调用
const ui_img = document.getElementById("ui_image");
ui_img.hidden = false;
const gifTotalTime = await getGifDuration(ui_img.src);
setTimeout(() => {
  ui_img.hidden = true;
}, gifTotalTime);

注意事项： #

• 本地文件上传场景可将fetch替换为FileReader读取二进制数据
• 跨域场景需要配置GIF资源的CORS响应头，或者将GIF部署在同域下

方案3：替换为video标签（兼容性最优） #

将GIF转成MP4格式，用video标签加载，监听播放结束事件实现控制，逻辑更简单且资源体积更小：

<video id="ui_gif_video" muted playsinline src="你的视频地址.mp4"></video>

const uiVideo = document.getElementById('ui_gif_video');
uiVideo.hidden = false;
uiVideo.play();
uiVideo.addEventListener('ended', () => {
  uiVideo.hidden = true;
});

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