在不重新加载图像的情况下从 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 是

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.

标签，每个标签包含一个 .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');

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.

想法是将下一张图片的src属性设置为''，然后将其设置回要显示的GIF的来源.>

这有效—它从头开始重新开始动画—但 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屋！