从JavaScript重新启动动画GIF而不重新加载图像 [英] Restart an animated GIF from JavaScript without reloading the image

问题描述

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

I am creating a slideshow of animations using animated GIFs. I'm crossfading from one animation to the next. The problem is: the only way I have discovered to ensure that the GIF starts animating from the first frame is to reload it each time it's shown. The GIFs are 200KB or so each, which is way too much bandwidth for a continuous slideshow.

这是我当前的代码。 img 和 nextimg 是< div> 标签包含单个< img> 每个。 nextimg_img 是与要显示的下一张图片对应的< img> 标记。

Here's my current code. img and nextimg are <div> tags containing a single <img> each. nextimg_img is the <img> tag corresponding to the next image to be displayed.

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源。

The idea is that it sets the src attribute of the next image to '', then sets it back to the source of the GIF to be displayed.

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

This works — it restarts the animation from the beginning — but the GIFs seem to be redownloaded every time they are displayed.

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

it's a looping slideshow, and I'm trying to avoid reloading the GIFs from the net when they get shown the second/third/subsequent time.

推荐答案

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

You should preload your images into code.

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

当您想要使用时：

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

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

Then when you swap the src out just swap from the preloaded image objects. That should do the trick to avoid redownloading.

这篇关于从JavaScript重新启动动画GIF而不重新加载图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！