Загрузка анимированных изображений для запуска с начала анимации с использованием jQuery - PullRequest
Новая
       4

Загрузка анимированных изображений для запуска с начала анимации с использованием jQuery

1 голос
/ 11 ноября 2010

Это продолжение этого поста , которое делает именно то, что мне нужно, за исключением проблемы.

Я вращаю изображения, используя div, которые просто показывают и скрывают div каждые 5 секунд, используя setInterval.

Проблема этого подхода заключается в том, что я загружаю анимированные 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 анимация начиналась с самого начала.

Кто-нибудь знает, как я могу взломать это?

Спасибо!

Ответы [ 2 ]

2 голосов
/ 11 ноября 2010

вы пытались перезагрузить изображение, снова установив 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');
0 голосов
/ 11 ноября 2010

Если вы перезагрузите свойство 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);
...