27

我正在使用动画 GIF 创建动画幻灯片。我正在从一个动画交叉淡入淡出到下一个动画。问题是：我发现确保 GIF 从第一帧开始动画的唯一方法是在每次显示时重新加载它。每个 GIF 大约 200KB，这对于连续幻灯片放映来说带宽太大了。

这是我当前的代码。img并且nextimg是每个都<div>包含一个的标签<img>。nextimg_img是与<img>要显示的下一个图像对应的标签。

var tmp = nextimg_img.attr('src');
nextimg_img.attr('src', '');
setTimeout(function() { nextimg_img.attr('src', tmp); }, 0);
img.fadeOut('slow');
nextimg.fadeIn('slow');

这个想法是它将src下一个图像的属性设置为''，然后将其设置回要显示的 GIF 的源。

这很有效——它从头开始重新启动动画——但 GIF 似乎每次显示时都会重新下载。

编辑：这是一个循环幻灯片，我试图避免在第二次/第三次/后续时间显示时从网络重新加载 GIF。

4

4 回答 4

33

您应该将图像预加载到代码中。

var image = new Image();
image.src = "path";

当你想使用：

nextimg_img.attr('src', image.src);

然后，当您交换 src 时，只需从预加载的图像对象中交换即可。这应该可以避免重新下载。

于 2010-07-07T04:33:19.010 回答
2 
// reset a gif in javascript
img.src = "your_image_url.gif"+"?a="+Math.random();

多田！

请注意，每次都会下载 GIF，因此请保留一个小文件。

于 2016-06-27T18:41:57.063 回答
1

下一个答案仅在您的.gif图像位于您的服务器上或Access-Control-Allow-Origin: *由于Cross-Origin 限制而提供标头作为响应的服务器上时才有效。

我使用内置fetch()将 gif 下载到内存 blob。然后这个 blob 用于.src在需要重新启动动画时更新 img 元素的属性。由于 blob 保存在内存中，因此不会重新下载。同样要重新启动动画，您只需要再次更新.src具有相同值的属性。

如果fetch()目标浏览器不支持，则XMLHttpRequest可以使用 good-old。也URL.createObjectURL()可以以不同的方式命名，然后可以使用像这里这样的包装器。

下面的代码也可以在 jsfiddle 上进行测试。

<input id="btn" type="button" value="ReStart">
<img id="img" height="150">
<script>
    document.addEventListener('DOMContentLoaded', ()=>{
        // fetch works only with urls on same server or servers that provide header "Access-Control-Allow-Origin".
        fetch('https://api-project-268277679120.appspot.com/h80bm5vc4iw7?url=https://i.stack.imgur.com/SkGeh.gif')
            .then(r=>r.blob())
            .then(b=>URL.createObjectURL(b))
            .then(u=>{
                document.getElementById('img').src = u;
                document.getElementById('btn').onclick = ()=>{
                    document.getElementById('img').src = u;
                };
            });
    });
</script>

于 2020-09-09T12:48:49.987 回答
1

这是一个单循环 5 帧 GIF（例如，repeat=1）。

只要它是页面上该 GIF 的唯一实例，就可以根据需要重新启动它（手动或按计时器等）。如果不是唯一的，所有实例将一起重新启动。

const gif=document.getElementById('gif');

function restartGIF(){
   gif.src=gif.getAttribute('src');
}

function startTimer(){
  gif.src=gif.getAttribute('src');
  setTimeout(function(){ restartGIF() }, 10000);
}
<button onclick="restartGIF()">restart gif</button>
<br>
<button onclick="startTimer()">start every 10s</button>
<br>
<img id='gif' src='https://i.stack.imgur.com/VBKe6.gif'>

（基于 Spinon 接受的答案。）

于 2020-09-22T21:29:40.983 回答