如何让已加载的Animated WEBP动画从开头重新播放？

问题详情 #

• 使用jQuery开发，初始加载Animated WEBP作为DIV背景图时，动画可正常从头循环播放
• 移除CSS类隐藏图片后，动画仍在后台持续运行
• 再次添加类显示图片时，动画从之前的进度继续播放，无法从头开始

现有方案的弊端 #

目前可行的方案是给图片URL添加随机参数，但这会触发图片重新加载——页面中包含大量约1MB的Animated WEBP图，对网络较慢的用户体验极差。

需求 #

寻求无需重新加载、不依赖复杂第三方插件的方案，复用已加载的图片资源，让动画从头播放。

尝试过的无效代码 #

let promise = this.load_image('/images/' + image_url, img);

promise.then((res) => {
    this.loaded(); // 显示图片
});

load_image: async function(url, elem)
{
    return new Promise((resolve, reject) => {
        elem.onload = () => resolve(elem);
        elem.onerror = reject;
        elem.src = url;
    });
}

解决方案 #

以下几种方法均无需重新请求服务器，直接复用浏览器缓存的图片资源：

1. 克隆已加载的Image实例

如果已经预加载了Image对象，克隆它即可得到一个全新的实例，其动画会从头开始播放：

// 假设img是已预加载完成的Image实例
const clonedImg = img.cloneNode(true);
// 将克隆后的图片作为DIV背景图
$('.your-target-div').css('background-image', `url(${clonedImg.src})`);

克隆操作不会触发新的网络请求，浏览器会直接复用缓存的图片数据，同时新实例的动画状态会被重置。

2. 临时重置图片src（利用缓存）

通过临时将图片src设置为空白GIF，再还原为原URL的方式，触发动画重置：

function restartWebpAnimation(imgUrl, targetSelector) {
  const tempImg = new Image();
  tempImg.onload = () => {
    $(targetSelector).css('background-image', `url(${imgUrl})`);
  };
  // 先加载极小的空白GIF，触发状态重置
  tempImg.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==';
  // 短暂延迟后还原原URL（从缓存读取）
  setTimeout(() => {
    tempImg.src = imgUrl;
  }, 10);
}

// 使用示例
restartWebpAnimation('/images/your-animate.webp', '.target-div');

空白GIF体积可以忽略不计，原WEBP会直接从浏览器缓存读取，不会产生新的网络请求。

3. CSS动画替代（适合简单场景）

如果WEBP动画逻辑简单，可将其转为CSS关键帧动画，通过重置动画状态实现从头播放：

/* 模拟WEBP动画的关键帧（根据实际动画调整） */
@keyframes webp-loop {
  0% { background-position: 0 0; }
  100% { background-position: -1200px 0; }
}

.target-div {
  background-image: url('your-animate.webp');
  animation: webp-loop 1.5s infinite steps(12);
}

/* 隐藏时暂停动画 */
.target-div.hidden {
  animation-play-state: paused;
}

显示图片时重置动画：

$('.target-div').removeClass('hidden').css('animation', 'none');
// 短暂延迟后重新启用动画，触发从头播放
setTimeout(() => {
  $('.target-div').css('animation', 'webp-loop 1.5s infinite steps(12)');
}, 10);

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