重い処理中のアニメーション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)を
動いたままにすることは可能なのでしょうか？
どなたかご教授いただければと思います。よろしくお願いいたします。
お礼
問題が解決しました。どうもありがとうございました。