Question

我正在使用动画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。

Answer 1

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

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

当您想要使用时：

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

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

Answer 2

// reset a gif in javascript
img.src = "your_image_url.gif"+"?a="+Math.random();

<强>多田！

请注意每次都会下载GIF，因此请将其保存为小文件。

Answer 3

仅当您的.gif图片位于服务器上或由于Cross-Origin limitation而提供Access-Control-Allow-Origin: *标头的服务器时，下一个答案才有效。

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

如果目标浏览器不支持fetch()，则可以使用较旧的XMLHttpRequest。另外，URL.createObjectURL()的命名可能不同，然后可以使用包装器like here。

下面的代码也可以通过on 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>

Answer 4

这是一个单循环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接受的answer。）}

Answer 5

我刚解决了。首先在页面上放置此代码（或其他静态图像）：

<img src="data:image/gif;base64,">

然后在准备播放时用以下代码替换它：

<img src="data:image/gif;base64,R0lGODl...AH0AvI">

它将从gif开始播放。

唯一的问题是您无法使用gif的网址，只能使用其base64。

从JavaScript重新启动动画GIF而不重新加载图像

5 个答案: