締切済み

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

  • 困ってます
  • 質問No.9507566
  • 閲覧数97
  • ありがとう数4
  • 気になる数0
  • 回答数4
  • コメント数0

お礼率 100% (354/354)

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

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

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

回答 (全4件)

  • 回答No.4

ベストアンサー率 54% (262/484)

他カテゴリのカテゴリマスター
>Preload(先読み)するタイミングとしては、基本的にはonLoadイベント。

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

お礼率 100% (354/354)

回答ありがとうございます。
投稿日時 - 2018-06-13 00:38:25
感謝経済、優待交換9月20日スタート
  • 回答No.3

ベストアンサー率 54% (262/484)

他カテゴリのカテゴリマスター
>問題は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/
お礼コメント
panacon

お礼率 100% (354/354)

回答ありがとうございます。
資料を拝見します。
投稿日時 - 2018-06-13 00:38:10
  • 回答No.2

ベストアンサー率 54% (262/484)

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

お礼率 100% (354/354)

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

ベストアンサー率 43% (7508/17240)

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

不可能です。

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

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

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

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

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

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

お礼率 100% (354/354)

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

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する

特集


より良い社会へ。感謝経済プロジェクト始動

ピックアップ

ページ先頭へ