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

2023/09/04 23:36

このQ&Aのポイント

javascriptで重い処理中にプログレス(アニメーションgif)を表示する方法を教えてください。
プログレス(アニメーションgif)が重い処理中でも動くようにすることは可能でしょうか？
重い処理中にプログレス(アニメーションgif)を表示し、処理が完了したら非表示にする方法を教えてください。

ベストアンサー

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

2013/03/11 19:02

お世話になります。 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)を動いたままにすることは可能なのでしょうか？どなたかご教授いただければと思います。よろしくお願いいたします。

gree777
お礼率66% (4/6)

JavaScript
回答数3
ありがとう数1

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

b0a0a
ベストアンサー率49% (156/313)

2013/03/11 19:05 回答No.1

重い処理は小分けにしてタイマーで回すかWorkerを使わないといけない

質問者

お礼 2013/03/21 11:01

返信遅くなってしまってもしわけありません。 Web Workers というものがあるのですね。 Web Workersを使用してバックグラウンドで処理をさせてみたいと思います。回答ありがとうございました。

その他の回答 (2)

CyberCypher
ベストアンサー率73% (39/53)

2013/03/12 11:16 回答No.3

javascriptもgifの描画もブラウザ側の処理ですブラウザが処理(描画)出来なければ止まる「処理している間も動かしたい！」と言う気持ちも分からなくもないので少しだけ #1さんの回答の捕捉になるのですが…… Ajaxを使用して処理をサーバーに投げる (ブラウザに処理させない) もしくは処理を複数回に分けて分散させる (一度にまとめて処理しない) 知らない技術を出されて難しいとは思いますけれど…… 自分にはこれくらいしか思いつきませんです

CyberCypher
ベストアンサー率73% (39/53)

2013/03/12 09:36 回答No.2

gifは処理止まりますねキャッシュしても止まるんじゃないでしょうか？ HTML5の記述になるのですが <progress max="100">現在、処理中……</progress> などprogressタグを使用してみては如何でしょうか？

質問者

補足 2013/03/12 11:05

回答ありがとうございます。 <progress max="100">現在、処理中……</progress> を試してみましたがやはり画面が止まってしまいました。。。

関連するQ&A

javascriptによるプログレスバーの表示制御
javascriptで任意の処理を実行中に、HTMLのプログレスバーの表示を制御する方法をご教示ください。ただし、JQueryなどのライブラリは使わないものとします。実現したい処理は以下です。 (1)：処理開始時にプログレスバーを表示　（HTMLに定義されている<progress>を表示） (2)：処理A実行 (3)：プログレスバーの進捗を50%に更新 (4)：処理B実行 (5)：プログレスバーの進捗を100%に更新 (6)：処理終了時にプログレスバーを非表示上記を実現するために、例えば以下のようなコードを書いても、(1)～(6)の全処理が終わった結果が画面に反映されるため、画面上はプログレスバーは表示されません。 <progress id="prog" max="100" value="0" style="display:none">Loading...</progress> <script> //(1)：処理開始時にプログレスバーを表示 document.getElementById("prog").style.display = 'block'; //(2)：処理A実行（仮の処理としてsleep） Sleep(3); //(3)：プログレスバーの進捗を50%に更新 document.getElementById("prog").value = '50'; //(4)：処理B実行（仮の処理としてsleep） Sleep(3); //(5)：プログレスバーの進捗を100%に更新 document.getElementById("prog").value = '100'; //(6)：処理終了時にプログレスバーを非表示 document.getElementById("prog").style.display = 'none'; //Sleepメソッド（テスト用） function Sleep(T){ var d1 = new Date().getTime(); var d2 = new Date().getTime(); while( d2 < d1+1000*T ){ d2=new Date().getTime(); } return; }; </script> プログレスバーの進捗を更新する度に、画面にその内容を反映するにはどのようにしたらよいのでしょうか。
- 締切済み
- JavaScript
携帯でGIFアニメーションが正しく表示されません
携帯でGIFアニメーションを実現したいのですが、パソコンのブラウザで確認した場合問題なく動作するのですが、携帯のブラウザで確認した場合にGIFのイメージが「logo1.gif」から次のイメージに再表示されません。携帯のキャリアはドコモで試しています。以下にプログラムを貼り付けます。間違っている点がありましたらご教授願います。 ---------------------------- ソース ---------------------------- <html> <head> <title>アニメーション/JavaScript</title> <script type="text/javascript">  </script> </head> <body onLoad="timerID=setTimeout('change()',500)"> <img src="image/logo1.gif" name="anime" width="50" height="50" alt="アニメ"> </body> </html> ---------------------------- ソース ----------------------------
- 締切済み
- JavaScript
処理のしくみがわかりません・・・
以下のスクリプトはfor文による繰り返し処理の例です。 <script type="text/javascript">  </script> FUNC1の関数を実行すると、「あいうえお」、 FUNC2の関数を実行すると、「あいあいうあいうえあいうえお」と表示されるのは理解できます。それで試しにこのスクリプトの最後に、 FUNC1()+FUNC2(); を追加したところ、「あいうえおあいあいうあいうえあいうえお」と表示されると思いきや、「あいうえおあいうえおいあいうえおいうあいうえおいうえあいうえおいうえお」と表示されました。どうもFUNC2を足す時、グローバル変数 a が "あ" ではなく、 "あいうえお" と代入されて実行されてるみたいです。そして、FUNC1、FUNC2を実行すると、それぞれ「あいうえおいうえおいうえお」「あいうえおいうえおいあいうえおいうえおいうあいうえおいうえおいうえあいうえおいうえおいうえお」と、理解不能の文字の並びになってしまいました。なぜ FUNC1()+FUNC2(); を追加したらそれぞれの関数の実行値が変わってしまったのでしょうか? その処理の仕組みをご教授お願いいたします<(_ _)>
- ベストアンサー
- JavaScript
JavaScriptアニメーションについて質問！！
学校の授業の入門編でやったことですだから初心者です使用ソフトはEmEditot, Internet Explorerです。ペイントを使い　01.gifから順番に06まで絵をかきましたそしてz:\local\100のフォルダに保存 z:\local\100 フォルダ内で右クリック → [新規作成] → [テキストドキュメント] ファイル名を 100.html とする(注意が表示されるが実行する) 100.html を EmEditorで開く (アイコン上で右クリック→[送る]→[EmEditor]) 以下のHTML文書を入力する（HTML文書をドラッグしてEmEditorに貼り付けてよい） xx, yy は作成した画像の幅と高さ, nnは画像枚数であるそれぞれを置き換えること gif形式(.gif)の画像として記述しているので他の形式の場合は拡張子を書き換えること <html> <head> <title>GIFアニメーション</title> <script language="JavaScript">  </script> </head> <body onload="start()"> <img name="pic" src="01.gif" width="xx" height="yy" /> </body> </html> という説明文があり　 <html> <head> <title>GIFアニメーション</title> <script language="JavaScript">  </script> </head> <body onload="start()"> <img name="pic" src="01.gif" width="128" height="128" /> </body> </html> まで書いたのですが　1枚しかネット上には表示されずアニメーションになりませんでした。どうすれば　コマ送りみたいなアニメーションになりますか書き方を教えてください
- ベストアンサー
- その他（インターネット・Webサービス）
innerHTMLによるアニメーションGIFの表示について
おたずねします。３つのアニメーションGIFを順に表示させて、最後まで行くと最初の画像に戻るように記述しました。サンプルページURL http://oreryu.sakura.ne.jp/sample/gif_out.html IE6.0では問題ないのですが、Firefox2.0で表示すると、 2周目以降の表示がおかしくなります。具体的には各アニメーションの最後のフレームが指定時間表示され、次の画像に遷移するので、全くアニメーションが行われません。また、どの画像で不具合が起こるかが限定されないようです。ブラウザの問題かと思い、キャッシュしない記述なども試しましたがうまくいきませんでした。外部javascriptのソース banner= new Array(); banner[0]=('<a href="#"><img src="1-1.gif" alt="" width="375" height="125" border="0"></a>'); banner[1]=('<a href="#"><img src="2-1.gif" alt="" width="375" height="125" border="0"></a>'); banner[2]=('<a href="#"><img src="3-1.gif" alt="" width="375" height="125" border="0"></a>') time= new Array(); //バナーの表示時間　上から表示順 time[0]=(5000);　 time[1]=(5000);　 time[2]=(5000);　 var menu=0; function bchange(){ document.getElementById('banner_change').innerHTML=(banner[menu]); timerID = setTimeout("bchange()",time[menu]); if(menu == banner.length-1){ menu=0; }else{ menu++; } } HTMlファイルのソース <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title></title> <script language="javascript" type="text/javascript" src="banner_chg.js"></script> </head> <body> <span id="banner_change"> <script language=javascript>  </script> </span> </body> </html> できれば上記のinnerHTMLを使用してタグを書き換えるやり方で、正常に表示できる方法を探しています。御存知の方がいれば教えてください。よろしくお願いいたします。
- ベストアンサー
- JavaScript
フリーのgifアニメーションについて
こんにちは。 VisualStudio2005をつかってアプリを作っているのですが、アプリの動作中（処理中）であることをわかりやすくするために gifアニメーションを表示したいとおもっています。フリー素材でいいものがあれば、おしえてもらえますでしょうか？かわいい系より、まじめ系のほうがいいです。 Windows標準ではいっているものがあれば、それがいいのですが。よろしくお願いいたします。
- ベストアンサー
- その他([技術者向] コンピューター)
JavaScriptとアニメーションgifの関係（？）
初心者なので予めご了承下さい（笑）。 function OpenWin(){ win=window.open("○○.htm","new","scrollbars=yes"); って言うのをコピってきて、リンク先をスクロールバーのみのウィンドウで開かせる（？）ってのを作ってみました。結果正常に窓は開くのですが、なぜがリンク元のページに張られているアニメーションgifが新しい窓を開いた瞬間に止まってしまうのです。これは仕方ないことなのでしょうか？
- ベストアンサー
- JavaScript
Ｃ＃　Gifアニメーション画像の読込みと表示？？？
FormでGIFアニメーション画像を読込み、pictureBoxに表示します (1)の方法では思った通りに表示されます Bitmap GifImage1 = new Bitmap(100, 100); ・・・・・　(1) GifImage1 = new Bitmap(@"f:\TestPattern.gif"); pictureBox1.Image = GifImage1; しかし(2)の方法ではFormをロードするProgram.csでエラーを起こしてしまします Bitmap GifImage2 = new Bitmap(100, 100); ・・・・・　(2) FileStream ImageStream = new FileStream(@"f:\TestPattern.gif", FileMode.Open, FileAccess.Read); GifImage2 = (Bitmap)System.Drawing.Bitmap.FromStream(ImageStream); ImageStream.Close(); pictureBox2.Image = GifImage2; (1)の方法ではファイルがロックされると聞いておりますので、通常は(2)を使用していますまたTestPattern.gifがアニメーション画像ではなく単なるGif画像の際は(1)(2)双方ともＯＫですこの辺りの理由をボンクラの私にも分かるように教えてくださいお願い致します
- ベストアンサー
- C・C++・C#
条件により処理を中断させる方法
下記のようなコードで、ある条件のときに処理を中断するという処理を書きたいと思っています。条件はループ処理の中で変化する変数の状態を検知するのではなく、処理の外部の状況を条件にしたいと思っています。例えば「1秒たっても終わっていなかったら中断」という様にしたいと思っています。 ※最初は「特定のキーが押されたら中断」などというようにしたかったのですが。しかしうまくいきません…。下記のコードではIE8, FirFox, Chromeすべて駄目でした。とりあえずIE8だけでも、さらに言えばHTA限定でもOKです。何とかならないものでしょうか？「このような処理は不可能だ」という情報でも、あきらめることができるためありがたいです。よろしくお願いします。 <html> <input type="button" id="btn"> <script> document.getElementById("btn").onclick = function() { var flg = false; var tid = window.setInterval(function() {flg = true;}, 1000); for (var i = 0; 80000 > i; i++) { if (flg) { window.clearInterval(tid); alert("break"); break; } document.getElementById("btn").value = i; } alert("finish"); }; </script> </html>
- ベストアンサー
- JavaScript
javascriptで処理している間画像を表示したい。
JavaScriptで処理をしている間、画像を表示したいのですが、上手く表示されません。以下、HTMLファイル <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="sample_csv.js"></script> </head> <body> <form name="form1"> <input type="button" value="取込" onclick="testWait()"/> </form> <p id="test"></p> </body> </html> 以下JSファイル function testWait() { var imgWait = document.createElement('img'); imgWait.setAttribute("src","data/waiting.gif"); document.getElementById("test").appendChild(imgWait); //alert("test"); sleep_busy(5000); document.getElementById("test").innerHTML = ""; } function sleep_busy(wait) { var start = (new Date()).getTime(); while (true) { if ((new Date()).getTime() >= start + wait * 1) break; } } jsファイルのコメントしてあるアラート文を有効にするときちんと表示されます。どうしてalert文を有効にした場合と、コメントにした場合で結果が違ってきてしまうのでしょうか。上手く表示する、良い方法ありますでしょうか。宜しくお願いします。
- ベストアンサー
- JavaScript

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

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