使用 jQuery 从动画开头加载动画图像

Question

这是这篇文章的后续内容，它完全符合我需要它做的事情，除了有一个问题。

我使用 div 旋转图像，使用 setInterval 每 5 秒显示和隐藏一个 div。

这种方法的问题是，我正在加载动画 gif 文件，因此即使下一个图像切换，它也会变得混乱，因为图像一直都在那里并且一直在动画。

因此，发生的情况是 image1(div1) 将重新开始其动画，它将淡出，image2(div2) 将显示，但动画在不可见时已经开始。

我需要的是一种重新加载这些图像的方法，以便当下一个 div 淡入时动画再次从头开始。使用 Gif 执行此操作的唯一方法是实际从缓存加载它们，这就是我需要的解决方案使用 jQuery。

这就是我所拥有的：

var images = new Array ('.advert1', '.advert2');
var index = 0;

function rotateImage()
{

$(images[index]).fadeOut('fast', function()
{
   index++;
   if (index == images.length)
       {
           index = 0;
       }
   $(images[index]).fadeIn('fast');
 });
}

setInterval (rotateImage, 5000);

在我的 html 中：

<div>
    <div class="advert1"><img id="myImage" src="advert1.gif" alt="image test" /></div>
    <div class="advert2"><img src="advert2.gif" alt="image test" /></div>
</div>

现在我需要的是能够使其“看起来”好像每次都加载新鲜的图像，以便当 div 淡入时，动画从头开始。

有人知道我该如何破解这个吗？

谢谢！

Answer 1

您是否尝试通过再次设置 src 来重新加载图像：

var img = $(images[index] img);
//this should reset animation (but without proper caching it could be a pain)
img.attr(src,img.attr(src));
$(images[index]).fadeIn('fast');

Answer 2

如果重新加载 src 属性，gif 会重新加载

var images = new Array ('.advert1', '.advert2');
var index = 0;

function rotateImage()
{

$(images[index]).fadeOut('fast', function()
{
   index++;
   if (index == images.length)
       {
           index = 0;
       }
   $(images[index]).get(0).src=$(images[index]).get(0).src;
   $(images[index]).fadeIn('fast');
 });
}

setInterval (rotateImage, 5000);