设置loop_mode:false后SuperGif仍播放两次且首次过快的问题

原因分析 #

1. 原生GIF自动播放冲突：浏览器会自动加载并播放<img>标签引用的原生GIF，当SuperGif初始化调用load()时，需要同步原生GIF的播放进度，会快速跳过已播放的帧，导致首次播放看起来速度异常快。
2. 脚本执行时机错误：你的代码中gifattack()在<img>元素定义前就执行了，即便部分环境能兼容，也会导致SuperGif初始化滞后于原生GIF加载，加剧进度同步问题。

解决方法 #

方法一：完全由SuperGif控制GIF加载 #

先让<img>不加载原生GIF，等DOM加载完成后再通过SuperGif初始化并设置源：

<div id="cont">
  <img id="gifimg" src="" alt="GIF占位图">
</div>

<script>
function gifattack() {
  const gifimg = document.getElementById('gifimg');
  gifimg.src = "https://i.giphy.com/media/fDO2Nk0ImzvvW/200w.gif";
  const rub = new SuperGif({ 
    gif: gifimg, 
    progressbar_height: 0, 
    loop_mode: false 
  });
  rub.load();
}

// 等待DOM加载完成再执行初始化
document.addEventListener('DOMContentLoaded', gifattack);
</script>

方法二：重置播放起始位置 #

保留原DOM结构，禁用SuperGif自动播放，加载完成后重置到第一帧再启动：

<div id="cont">
  <img id="gifimg" src="https://i.giphy.com/media/fDO2Nk0ImzvvW/200w.gif">
</div>

<script>
function gifattack() {
  const gifimg = document.getElementById('gifimg');
  const rub = new SuperGif({ 
    gif: gifimg, 
    progressbar_height: 0, 
    loop_mode: false,
    auto_play: false // 关闭自动播放
  });

  rub.load(() => {
    // 加载完成后重置到起始帧再播放
    rub.move_to(0);
    rub.play();
  });
}

document.addEventListener('DOMContentLoaded', gifattack);
</script>

原理说明 #

• 方法一通过延迟设置GIF源，让SuperGif完全接管播放流程，避免了浏览器原生播放的干扰，从根源解决进度同步问题。
• 方法二通过重置帧位置，强制SuperGif从第一帧开始按正常速度播放，抵消原生播放带来的进度偏差。

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