javascript - 从 JavaScript 重新启动动画 GIF，无需重新加载图像

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 时，只需从预加载的图像对象中交换即可。这应该可以避免重新下载。