点击后重新播放GIF的JavaScript实现方案咨询

问题核心是浏览器会缓存已加载的GIF资源，仅通过display切换显示状态不会触发重新播放。要实现每次显示GIF都从头播放，可以通过强制浏览器重新加载GIF资源来解决，具体方案如下：

修改步骤 #

1. 给GIF图片元素添加唯一ID，方便JavaScript获取
2. 在切换显示GIF时，通过修改图片src（添加随机参数避免缓存）触发重新加载

修改后的完整代码 #

HTML

<div onclick="myFunction()">
  <div id="pic-div">
    <img
      src="https://img.freepik.com/premium-photo/british-shorthair-front-white-wall_191971-17751.jpg?w=2000"
    />
  </div>

  <div id="gif-div">
    <!-- 新增id用于获取GIF图片 -->
    <img id="gif-img" src="https://i.gifer.com/Z97X.gif" />
  </div>
</div>

CSS

#pic-div {
  display: none;
  width: 250px;
}

#gif-div {
  width: 250px;
}

JavaScript

function myFunction() {
    const picDiv = document.getElementById("pic-div");
    const gifDiv = document.getElementById("gif-div");
    const gifImg = document.getElementById("gif-img");

    // 切换静态图和GIF的显示状态
    const isPicShowing = picDiv.style.display !== "none";
    picDiv.style.display = isPicShowing ? "none" : "block";
    gifDiv.style.display = isPicShowing ? "block" : "none";

    // 当显示GIF时，强制重新加载资源
    if (gifDiv.style.display === "block") {
        // 先清空src触发资源释放，再重新设置带时间戳的URL
        gifImg.src = "";
        // 时间戳作为随机参数，避免浏览器读取缓存
        gifImg.src = "https://i.gifer.com/Z97X.gif?" + Date.now();
    }
}

原理说明 #

• 浏览器判断资源是否缓存的依据是URL，通过在GIF地址后添加Date.now()生成的时间戳，每次请求的URL都不同，浏览器会认为是新资源并重新加载
• 重新加载后的GIF会从头开始播放，完美解决切换时只播放一次的问题

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