アニメーションGIF終了時の静止画像

質問

ホームページでアニメーションGIFを使用したいと考えています。
設定の仕方を調べていたら、下記のコードでPlay画面の静止画を表示させておいて、クリックしたときにアニメーションを読み込む記事を見つけました。
<img src="sample_play.gif" onclick="this.setAttribute('src', this.getAttribute('src').replace(/_play.gif$/g, '.gif'));" style="cursor: pointer;">

これは良いと思い利用したいのですが、できればアニメーションを２回ループした後の終了時に再度Play画面に戻したいと思っています。
特別なJAVAのアドインをインストールすることなく、ページに簡素なコードを書くか既存のjqueryだけで対応できると有難いと思っています。

コードをお分かりの方、教えてください。
よろしくお願いします。

回答No.4

amanojaku1

>Preload(先読み)するタイミングとしては、基本的にはonLoadイベント。

Preload(先読み)するタイミングとしては、表示タグの記述前後の方が良いかもしれません(Preload(先読み)の処理に工夫が必要になりますが)。

お礼

回答ありがとうございます。

回答No.3

amanojaku1

>問題はCPUがBusyでGIFの再生時間が長くなる場合もありえます

CPUが非常にBusyだとGIFの再生が止まる場合もあるようです。

下記のように画像をPreload(先読み)しておくと、少しは そのような障害が緩和される可能性があります(あくまでも緩和される可能性です)。
Preload(先読み)するタイミングとしては、基本的にはonLoadイベント。

画像の先読み
http://andante.in/j/%E7%94%BB%E5%83%8F%E3%81%AE%E5%85%88%E8%AA%AD%E3%81%BF/

お礼

回答ありがとうございます。
資料を拝見します。

回答No.2

amanojaku1

GIFの再生時間が分かってると言う前提なら、タイマーを使って工夫すればできるでしょう。
問題はCPUがBusyでGIFの再生時間が長くなる場合もありえますので、その場合はGIFが終了する前にタイマー割り込みが入ってしまうつ言う問題があります(それを許容できるか、どうか)。

お礼

回答ありがとうございます。
コードの見本のあった記事には、アニメーションGIFのような大きなファイルをそのままページに置いてしまうと、読み込みに時間がかかり、Googleのロボット検索に嫌われてしまうという危惧がありました。それ故、読み込み時には、アニメーションではないGIF静止画像を置き、これをクリックするとJAVAが動いて、アニメーションGIFの名前に変更してアニメーションがスタートするものでした。そこで、そのアニメーションの終了時に、またJAVAが動いて、最初のGIF静止画像の名前に変更して再読み込みして欲しいと考えていました。

回答No.1

chie65536（@chie65535）

＞できればアニメーションを２回ループした後の終了時に再度Play画面に戻したいと思っています。
＞特別なJAVAのアドインをインストールすることなく、ページに簡素なコードを書くか既存のjqueryだけで対応できると有難いと思っています。

不可能です。

JAVA側（と言うか、ブラウザ）は「GIFアニメがどこまで進んだかを把握できない」です。

ブラウザ側は「２回ループした事を把握できない」ので「２回ループ後に、元のクリック前の状態には戻れない」です。

「クリック後、何秒か経ったら、ページをリロードして、元の状態に戻す」は可能ですが、指定できるのは「何秒か経ったら」なので「２回ループしたら」は出来ません。

また、貴方のパソコンで「２回ループするくらいの秒数」を指定しても、他のパソコンが同じ処理スピードで表示するとは限らないので、秒数はアテに出来ません。

残念ながら、貴方がやろうとしている事は「GIFでは不可能」です。

FLASHなら「最初に静止画を表示していて、クリックされたら２回ループ表示して、終わったら最初の静止画に戻ってクリック待ちする」のが「FLASHだけで可能」です。

お礼

回答ありがとうございます。
特別なアドインでGIFのスタートとストップをコントロールすることを紹介しているページは見たのですが、これよりも前に、アニメーションGIFを直接読み込まずにスタートページを貼り付けてページを軽くする記事も見ていたので、どうにかならないものかと思っていました。