从头开始重新显示已加载的动画 WEBP 图像

Question

有一个问题：当最初在页面上加载动画 webp 图像时，一切正常。图像被加载，加载完成后，从动画的开头开始显示。图像的动画是循环的，这意味着即使我将其从页面中隐藏（CSS 类已删除），它也会继续播放。它作为背景图像插入到 DIV 元素中。如果需要再次显示动画，我会向 div 添加一个类，但动画不会从头开始播放，而是从动画初始加载后的那一刻开始播放。我在 ерш 页面上使用 jQuery。

一个可行的选择是在图像的 URL 末尾添加一个随机值，但这意味着再次从服务器重新加载它，并且页面上有很多动画 webp 图像，它们的重量相当大（大约1兆字节），不包括网速慢的人使用此方法。

各位高手，请问有没有什么情况可以模拟在浏览器中加载已加载的图像并从头开始播放动画？非常希望能够在不借助繁琐的第三方插件的情况下解决问题。首先，我想了解解决方案的本质，而不是加载一个巨大的插件并获得快速但难以理解的结果。

现在我研究了一些这样的结构，但还没有好的结果

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;
    });
}```

Answer 1

所以这似乎就像将 src 设置为“”一样简单，但是我使用

setTimeout

运气更好一些

这是我用来执行此操作的函数；

function restartWEBP(img){
    var src = img.src; 
    img.src = ""; 
    setTimeout(function(){
        img.src = src; 
    }, 1); 
};