如何实现GIF动画页面加载自动播放，且保留点击重播功能？

你的需求其实很好实现，而且默认情况下，设置了重复次数的GIF在页面加载时本来就会自动播放——不过要确保点击重播的可靠性，我们需要优化一下原来的代码，避免浏览器缓存导致的不重播问题。

这里有两种简单实用的方案：

方案1：添加时间戳避免缓存（最简洁） #

直接修改onclick事件，给GIF的URL加上一个动态的时间戳参数，这样每次点击时浏览器都会认为是新的资源，从而重新加载并播放动画：

<img src="red-anim.gif" alt="" class="post-thumb" onclick="this.src='red-anim.gif?' + new Date().getTime()"/>

• 页面加载时，src是正常的GIF地址，浏览器会自动加载并播放你的3次循环动画；
• 点击图片时，URL会带上当前时间戳（比如red-anim.gif?1699999999），强制浏览器重新请求GIF，从头开始播放3次。

方案2：通过JavaScript重置src（更灵活） #

如果需要更灵活的控制，可以用一个小函数来重置动画，先清空src再重新赋值，同样能绕过缓存：

<img id="repeatGif" src="red-anim.gif" alt="" class="post-thumb" onclick="replayGif()"/>

<script>
function replayGif() {
  const gifElement = document.getElementById('repeatGif');
  // 先保存原地址，清空src再重新赋值
  const originalSrc = gifElement.src;
  gifElement.src = '';
  gifElement.src = originalSrc;
}
</script>

这个方法和方案1效果一致，只是把逻辑抽到了函数里，方便后续扩展（比如添加播放状态判断等）。

补充说明 #

你的GIF已经设置了仅重复3次，所以不管是页面加载自动播放，还是点击重播，动画都会完整播放3次后停止，完全符合你的需求。原来的this.src=this.src方法有时候失效，本质是浏览器的缓存机制——它认为资源没有变化，就不会重新加载，自然不会重播动画。

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