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