1

これは、問題があることを除いて、私が必要とすることを正確に行うこの投稿の続きです。

setIntervalを使用して5秒ごとにdivを表示および非表示にする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 がフェードインしたときにアニメーションが最初から開始されるように、画像が毎回新鮮に読み込まれるように「見える」ようにすることです。

これをクラックする方法を知っている人はいますか？

ありがとう！

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 に答える