使用jQuery加载动画图像以从动画开始开始

这是从this post开始的一个后续操作，它完全符合我需要的操作，除非出现问题。使用jQuery加载动画图像以从动画开始开始

我旋转的图像使用div显示和每隔5秒使用setInterval隐藏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淡入时，动画从一开始就开始。

任何人都知道我该如何解决这个问题？

谢谢！

来源

2010-11-11 Sixfoot Studio

我建议使用非GIF动画下手，并加载动画gif来取代它们。我不能从我所在的地方组合演示，但似乎是一种更简单的方法。 – 2010-11-11 12:25:02

嗨大卫。扔另一个扳手在作品中！我无法控制GIF，因为它们是来自我们客户的动画广告。 :( – 2010-11-11 12:34:08

做你试图通过重新设置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-11 12:57:09 mpapis

好主意;比我自己对这个问题的建议/评论简单得多+1 =） – 2010-11-11 17:09:46

如果你重装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-11 13:03:09 rterrani

使用jQuery加载动画图像以从动画开始开始

回答

相关问题