1

这是这篇文章的后续内容，除了出现问题外，它完全符合我的需要。

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

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

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

我需要的是一种重新加载这些图像的方法，以便在下一个 div 淡入时动画再次从头开始。使用 Gifs 执行此操作的唯一方法是从缓存中实际加载它们，这就是我需要的解决方案使用 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 淡入时，动画从头开始。

有谁知道我怎么能破解这个？

谢谢！

4

2 回答 2

2

您是否尝试通过再次设置 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');
于 2010-11-11T12:57:09.860 回答
0

如果重新加载 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);
于 2010-11-11T13:03:09.053 回答