27

アニメーション GIF を使用してアニメーションのスライドショーを作成しています。あるアニメーションから次のアニメーションにクロスフェードしています。問題は、GIFが最初のフレームからアニメーションを開始することを確実にする唯一の方法は、GIFが表示されるたびにリロードすることです。GIF はそれぞれ 200KB 程度で、連続したスライドショーには帯域幅が多すぎます。

これが私の現在のコードです。imgとnextimgは、それぞれ<div>1 つを含むタグ<img>です。次に表示される画像に対応するタグですnextimg_img。<img>

var tmp = nextimg_img.attr('src');
nextimg_img.attr('src', '');
setTimeout(function() { nextimg_img.attr('src', tmp); }, 0);
img.fadeOut('slow');
nextimg.fadeIn('slow');

アイデアはsrc、次の画像の属性を に''設定してから、表示する GIF のソースに戻すというものです。

これは機能します — アニメーションを最初から再開します — しかし、GIF は表示されるたびに再ダウンロードされるようです。

編集: これはループ スライドショーです。GIF が 2 回目、3 回目、またはそれ以降に表示されるときに、GIF をネットからリロードしないようにしています。

4

4 に答える 4

33

画像をコードにプリロードする必要があります。

var image = new Image();
image.src = "path";

使いたいとき：

nextimg_img.attr('src', image.src);

次に、src をスワップアウトするときは、プリロードされたイメージ オブジェクトからスワップするだけです。これにより、再ダウンロードを回避するためのトリックが実行されるはずです.

于 2010-07-07T04:33:19.010 に答える