GIF动画使用后无法重置，寻求简易解决方法

浏览器会缓存GIF的播放状态，哪怕移除旧的img元素再创建新的，浏览器仍可能复用缓存的状态，导致动画无法从头开始。这里有两个简易可靠的修复方案：

方案一：给GIF URL添加随机查询参数 #

每次创建img元素时，在GIF地址后追加随机参数（比如当前时间戳），让浏览器认为这是新资源，从而重置播放状态：

let particles = document.createElement("img");
particles.style = "left: "+(x)+"px; top: "+(y)+"px;";
particles.className = "tile";
document.body.appendChild(particles);
// 追加时间戳参数，强制浏览器从头播放GIF
particles.src = "assets/gifs/place.gif?t=" + Date.now();
setTimeout(function() {
   particles.remove()
}, 500)

这个方案无需预加载，实现简单；浏览器通常会缓存GIF文件本身，只是不会复用播放状态，不会额外增加太多加载开销。

方案二：预加载GIF并克隆元素 #

先预加载一次GIF，之后每次需要播放动画时，克隆预加载好的Image对象。克隆出的新元素会从头播放动画：

// 初始化时预加载GIF，仅执行一次
const preloadedPlaceGif = new Image();
preloadedPlaceGif.src = "assets/gifs/place.gif";

// 每次播放动画的代码
let particles = preloadedPlaceGif.cloneNode(true);
particles.style = "left: "+(x)+"px; top: "+(y)+"px;";
particles.className = "tile";
document.body.appendChild(particles);
setTimeout(function() {
   particles.remove()
}, 500)

这个方案更高效，GIF仅加载一次，适合需要频繁播放该动画的场景。

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