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

解決済

質問者：gree777
質問日時：2013/03/11 19:02
回答数：3件

お世話になります。
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 …
<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)を
動いたままにすることは可能なのでしょうか？

どなたかご教授いただければと思います。よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

No.1ベストアンサー

回答者： b0a0a
回答日時：2013/03/11 19:05

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

- 1
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2013/03/21 11:01

No.2

回答者： CyberCypher
回答日時：2013/03/12 09:36

gifは処理止まりますね

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

この回答への補足

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

補足日時：2013/03/12 11:05

通報する

- 0
- 件

通報する

No.3

回答者： CyberCypher
回答日時：2013/03/12 11:16

javascriptもgifの描画もブラウザ側の処理です

ブラウザが処理(描画)出来なければ止まる
「処理している間も動かしたい！」
と言う気持ちも分からなくもないので少しだけ

#1さんの回答の捕捉になるのですが……
Ajaxを使用して処理をサーバーに投げる
(ブラウザに処理させない)
もしくは処理を複数回に分けて分散させる
(一度にまとめて処理しない)

知らない技術を出されて難しいとは思いますけれど……
自分にはこれくらいしか思いつきませんです