web-dev-qa-db-ja.com

画像をリロードせずにJavaScriptからアニメーションGIFを再起動します

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

これが私の現在のコードです。 imgとnextimgは、それぞれ1つの<div>を含む<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は表示されるたびに再ダウンロードされるようです。

編集：これはループするスライドショーであり、2回目/ 3回目以降に表示されたときにネットからGIFを再読み込みしないようにしています。

javascriptjquerygifanimated-gif
21
nornagon

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

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

使用したいとき：

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

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

28
spinon
// reset a gif in javascript
img.src = "your_image_url.gif"+"?a="+Math.random();

多田！

GIFは毎回ダウンロードされるので、小さなファイルにしてください。

3
Alvaro Joao