• 締切済み

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

amanojaku1の回答

回答No.2

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

panacon
質問者

お礼

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

この回答がついた質問に戻る
回答 全件
>Preload(先読み)するタイミングとしては、基本的にはonLoa…
>問題はCPUがBusyでGIFの再生時間が長くなる場合もありえます …
＞できればアニメーションを２回ループした後の終了時に再度Play画面に…
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • ＧＩＦアニメーション

    先日、ヤフオクで商品画像が動いているのを見ました。別のカデゴリーでそれはＧＩＦアニメーションですよと教えていただきました。 そして自分で実際に商品画像をＧＩＦアニメーションで作ってみました。しかし、パソコン上では動いて見えるのですが、オークション出品画面でＵＰしましたら静止画になってしまいます。どなたかいい方法をご存知ないでしょうか？よろしくお願いします。

  • 重い処理中のアニメーションgifについて

    お世話になります。 javascript で重い処理中のプログレス(アニメーションgif)表示について教えてください。 やりたいことは以下です。 ==================================== 1.重い処理の前にプログレス(アニメーションgif)表示 2.重い処理開始 3.プログレス(アニメーションgif)非表示 [sample.html] <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(function() { $('#btn').click(function() { progressStart(); // プログレス(アニメーションgif)表示 func1(); // 重い処理開始 progressEnd(); // プログレス(アニメーションgif)非表示 }); }); /** * プログレス(アニメーションgif)表示 */ function progressStart() { $('#prog').show(); } /** * プログレス(アニメーションgif)非表示 */ function progressEnd() { $('#prog').hide(); } /** * 重い処理(とりあえず5秒) */ function func1() { var T = 5; //T秒待つ var d1 = new Date().getTime(); var d2 = new Date().getTime(); while( d2 < d1+1000*T ){ d2=new Date().getTime(); } return; } </script> </head> <body> <form> <input type="button" id="btn" value="開始" /> <div id="result"></div> <img id="prog" src="img/loadinfo.gif" alt="" style="display:none;" /> </form> </body> </html> ==================================== 上記コードで試したのですが、 重い処理中はプログレス(アニメーションgif)が動かず固まったままです。。。 重い処理中もプログレス(アニメーションgif)を 動いたままにすることは可能なのでしょうか？ どなたかご教授いただければと思います。よろしくお願いいたします。

  • VisualC++でアニメーションgifを読み込めない？

    VisualC++上でゲームのプログラミングをしているのですが、エンディング（ゲームオーバー）画面にアニメーションgifを表示させたいと思っています。 実際にアニメgifを作ってパスを挿入しビルドしてみたところ、実際にゲームは動くのですがゲームオーバーになったときに動作が止まってしまいます。 jpegやtga、静止gifは読み込めるのですが・・・アニメーションgifは読み込めない仕様になっているのでしょうか？ ご存知の方、教えていただけたら幸いです。

  • 【javascript】ロールオーバーと画像自動切換えがバッティングし

    【javascript】ロールオーバーと画像自動切換えがバッティングして、ロールオーバーがきいていません。 javascriptは該当の動作がどれかというのが分かる程度で、書く事も修正する事もできません。 ロールオーバーが正常に動いていたページに画像自動切換えのスクリプトを設置したところ、ロールオーバーが動かなくなりました。 ページの遷移に問題はないのですが、他ページでは出来ているので何とかしたいと思っています。どうかお助け下さい。 ≪ロールオーバー≫ function initRollovers() { if (!document.getElementById) return var aPreLoad = new Array(); var sTempSrc; var aImages = document.getElementsByTagName('img'); for (var i = 0; i < aImages.length; i++) { if (aImages[i].className == 'imgover') { var src = aImages[i].getAttribute('src'); var ftype = src.substring(src.lastIndexOf('.'), src.length); var hsrc = src.replace(ftype, '_o'+ftype); aImages[i].setAttribute('hsrc', hsrc); aPreLoad[i] = new Image(); aPreLoad[i].src = hsrc; aImages[i].onmouseover = function() { sTempSrc = this.getAttribute('src'); this.setAttribute('src', this.getAttribute('hsrc')); } aImages[i].onmouseout = function() { if (!sTempSrc) sTempSrc = this.getAttribute('src').replace('_o'+ftype, ftype); this.setAttribute('src', sTempSrc); } } } } ≪画像切り替え≫ window.onload = function(){ var num = 1; setInterval(function(){ document.getElementById('link' + num).style.display = 'none'; num = document.getElementById('link' + (num+1))? ++num : 1; document.getElementById('link' + num).style.display = 'block'; },7500); }

  • スマートな外部javaでロールオーバーのマウスポインタを変えるには？

    お世話になります。 スマートな外部javaでロールオーバーさせましたが、マウスポインタが矢印のままで指に変わりません。どうしたらよいのでしょうか？ 【参照元】 http://blog.bluebox.in/2006/10/javascriptcsstarget_blank.html ドリームウィーバーなどでも簡単にマウスオーバー効果をつけることが出来ますが、img要素内にスクリプトを呼び出すコードが入ってしまうのであまりスマートではありません。 この、英語のサイトで紹介されている方法だと、img要素にclass="imgover"というクラスをつければ、src属性で指定したファイルのファイル名に_oを足した名前の画像を読み込んで表示してくれるというJavaScriptです。 /* Standards Compliant Rollover Script Author : Daniel Nolan http://www.bleedingego.co.uk/webdev.php */ function initRollovers() { if (!document.getElementById) return var aPreLoad = new Array(); var sTempSrc; var aImages = document.getElementsByTagName('img'); for (var i = 0; i < aImages.length; i++) { if (aImages[i].className == 'imgover') { var src = aImages[i].getAttribute('src'); var ftype = src.substring(src.lastIndexOf('.'), src.length); var hsrc = src.replace(ftype, '_o'+ftype); aImages[i].setAttribute('hsrc', hsrc); aPreLoad[i] = new Image(); aPreLoad[i].src = hsrc; aImages[i].onmouseover = function() { sTempSrc = this.getAttribute('src'); this.setAttribute('src', this.getAttribute('hsrc')); } aImages[i].onmouseout = function() { if (!sTempSrc) sTempSrc = this.getAttribute('src').replace('_o'+ftype, ftype); this.setAttribute('src', sTempSrc); } } } } window.onload = initRollovers;

  • クリックした自身の画像を別画像に入れ替えて表示

    前回質問したときに、解決したと思いましたが、動きがおかしいので 再質問します。 メニュー欄を画像にて表示し、画像クリックにて対象ページに飛ぶようになっています。 メニューをクリックした時、クリックした自身の画像を別画像に入れ替えて表示させようとしています。 onClick時に自分自身の画像を入れ替えし、リンク先が表示されるまで入れ替えた画像を表示したいのです。 下記のコードだと、クリック時、a_press.gif'は表示されず 何も表示されていない状態（背景画像）が見えてしまいます。 a_press.gif'<a href="http://www.yahoo.com/"> <img src="images/a_on.gif" onmouseover="this.src='images/a_rollover.gif';" onmouseout="this.src='images/a_on.gif';" onclick="this.src='images/a_press.gif'; this.onmouseover=null; this.onmouseout=null;"> </a> どなたかご教示いただけないでしょうか？　よろしくお願いします。 IE,Firefox対応希望。

  • jsを使ったロールオーバーで特定の画像だけ表示できません

    インターネット上に同じ様な内容の情報がありましたが、若干今回の問題とずれており、どれを見ても解決できないため質問しました。 以下のサイトを参考にjavascriptを使ったロールオーバーを設置しました。 http://css-happylife.com/log/javascript/000157.shtml 以下がjavascriptのコードです。 ---------------------------------------------------- function smartRollover() { if(document.getElementsByTagName) { var images = document.getElementsByTagName("img"); for(var i=0; i < images.length; i++) { if(images[i].getAttribute("src").match("_off.")) { images[i].onmouseover = function() { this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on.")); } images[i].onmouseout = function() { this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off.")); } } } } } if(window.addEventListener) { window.addEventListener("load", smartRollover, false); } else if(window.attachEvent) { window.attachEvent("onload", smartRollover); } ---------------------------------------------------- 画像に「●●_off」という名前つけると、マウスオーバー時に「●●_on」の画像へ切り替わるというものです。（●●は同じ名前です） 特定の画像が表示されないという具体的な内容ですが メニューとして4つの画像を縦並びでリスト表示させているのですが、その一番上の画像だけが表示されません。 表示されないのは、通常時に表示されるべき「●●_off.gif」です。 4つの画像は全てgif画像です。 IE6、7、8とFirefox3で試しました。 IE6、7、8は「●●_off.gif」が×印で表示され、そこにマウスオーバーすると「●●_on.gif」の画像が表示されます。マウスを離すとまた×印に戻ります。Firefoxは何も表示されず、マウスオーバーする場所もありません。 2～4つ目の画像については問題なく表示、切り替えも動作します。 パスが間違っているのではないかと思い確認し、念のため絶対パスをブラウザのアドレスに直接入力してみましたが、表示されません（404エラー）。 確実にサーバーへアップロードしているのに表示されません。 こんなことってあり得るのでしょうか？？ ●●_on.gifの方は同様に確認すると表示されました。 さらに、jsのせいかもしれないと思い、jsの影響がない別のディレクトリにアップロードしてみました。上記と同様にブラウザに絶対パスを入力して確認しましたが、それでも表示されません。 まるでこの画像だけがネットに拒否されているかの様です・・・。 さらに、ファイル名が悪いのかと思い（あり得ないですが・・）、別の名前でいろいろと試しましたがやはり_offの方は表示されませんでした。 さらに、しつこいですが、4つのリストメニューのうち、一番最初だけが表示されないというバグではないかと思い、とりあえず表示されない「●●_off.gif」のリストだけをhtmlから消去してみました。 すると2～4番目にあったものがそのまま表示されます。一番最初だけが・・・というわけではない様です。 最後にダメもとで、gifをjpgに変えてアップロードしてみたら、表示されました・・・。 いちおう表示できたということで解決したのですが、何が原因だったのか、今後同じことが起こり、どうしてもgifでなければならない際を考えて、また、実はすごく根本的な間違いだったのでは？と思い質問させていただきました。 jsはまだ初心者のため、想像でいろいろと試しましたが解決しませんでした。勉強が足りないのは承知していますが、もし原因がお分かりの方がいらっしゃいましたら、ご教示ください。 宜しくお願いします。

  • ロールオーバーについて

    ロールオーバーをシンプルなjavascriptで実装するとの事でとあるサイトにて、以下のようなスクリプトがありました。 http://css-happylife.com/archives/2007/0621_0010.php ▼▼▼スクリプト▼▼▼ function smartRollover() { if(document.getElementsByTagName) { var images = document.getElementsByTagName("img"); for(var i=0; i < images.length; i++) { if(images[i].getAttribute("src").match("_off.")) { images[i].onmouseover = function() { this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on.")); } images[i].onmouseout = function() { this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off.")); } } } } } if(window.addEventListener) { window.addEventListener("load", smartRollover, false); } else if(window.attachEvent) { window.attachEvent("onload", smartRollover); } ▲▲▲スクリプト▲▲▲ DOMを使ってimgのソースを 画像「_off.」から「_on.」に書き換えているんだなということまではわかるのですが、 if(document.getElementsByTagName) とか、 if(window.addEventListener) 等の記述があります。 ifのあとの()の中身は i>0 や (i>5)&&(i<=10) 等、演算子を用いた条件を記述するタイプした目にしたことがないのですが、 これはどういった事を表しているのでしょうか？ ご教授お願いいたします。

  • smartRolloverのカスタマイズについて

    smartRollover.jsを使っています。 ロールオーバー時に　〇〇_off.jpg　が〇〇　_on.jpgに画像ファイル名が変更されるようになっています。 今は、〇〇_off.jpg　にロールオーバー時に〇〇_on.jpgという　画像ファイルがない場合、何も画像が表示されません。 それを〇〇_off.jpgにロールオーバーしたときに〇〇　_on.jpgの画像がない場合に、ファイル名を変更させない（〇〇_off.jpgをそのまま表示する）ようにしたいのですが、どのようにすれば良いでしょうか？ よろしくおねがいいたします。 ■smartRollover.js ------------------------- function smartRollover() { if(document.getElementsByTagName) { var images = document.getElementsByTagName("img"); for(var i=0; i < images.length; i++) { if(images[i].getAttribute("src").match("_off.")) { images[i].onmouseover = function() { this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on.")); } images[i].onmouseout = function() { this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off.")); } } } } } if(window.addEventListener) { window.addEventListener("load", smartRollover, false); } else if(window.attachEvent) { window.attachEvent("onload", smartRollover); } --------------------------

  • Thunderbirdでgifアニメが動かない

    リッチテキスト使用です。 受信したメール上のgifアニメは動いているのですが、返信ボタンを押して返事を書こうとする画面では動いていません。画像は静止画像としては表示されているのですが。 それと、新たにメールを作成する段階でも、gifアニメの挿入で画像を入れると静止画像になってしまいます。挿入→画像で、【画像プレビュー】では動いています。 どこを設定すれば通常のアニメーションgifとして動くでしょうか。 よろしくお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する
質問する