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

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

这是我目前的代码。 img和nextimg是

标签，每个标签包含一个 。 nextimg_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开始播放。

唯一的问题是你不能使用gif的URL，只能使用它的base64。