JavaScriptで重い処理をするとアニメーションGIFが止まる件について
当分の間JavaScriptオンリーです。今日はですます調です。
Ajaxのローディングとかでクルクル回るアニメーションGIFてありますよね？あのローディングのアニメーションGIFをJavaScriptで重い処理をするときに使おうと思っていてその画像を探していました。そして、先日調べていたら、こんなサイトを発見しました。激しくいいですね。
Ajaxload – Ajax loading gif generator
実は、結構有名なサイトなんですね。知らなかったです。でも、先日知って、早速作ってみました。
そして、早速使おうと思ったのですが、重い処理をしている間にアニメーションGIFを表示させていてもアニメーションがされないのです。。。つまり、アニメーションではない状態のGIF画像が表示されるだけなのです。その原因はJavaScriptが処理されている間だからです。また、重いJavaScriptが処理中の際にはその間はブラウザが固まります。
その解決方法を探していたのですが、その際にようやく私もsetTimeoutの使いかたがわかりました。そして、ページ描画のタイミングを制御できるようになりました。そうです。ポイントはsetTimeoutです。重い処理を一つの関数に入れちゃダメなんですね。つまり、これはダメなのです。
Event.observe(window, 'load', function() {
var loadingImage = Builder.node('img', {src: 'loading.gif'});
var sync = $('sync');
var async = $('async');
var loading = $('loading');
var working = $('working');
var loop = $('loop');
Event.observe(sync, 'click', function() {
var breakNumber = 500;
var callback = function() {
// ここが重いということにする。例えば、以下はまぁまぁ重い。
while (breakNumber--) {
working.appendChild(Builder.node('div', {className: 'test'}));
document.getElementsByClassName('test');
}
loading.removeChild(loading.firstChild);
loop.innerHTML = 501 - breakNumber;
sync.disabled = false;
}
loading.appendChild(Builder.node('div', [loadingImage, "Loading..."]));
sync.disabled = true;
setTimeout(callback, 0);
});
});
あ。ちなみにprototype.jsとscript.aculo.usがあることを前提に書いているので、その辺は適当にほげほげしてください。まぁ、ここではsetTimeoutを使用して、その中で重い処理を実行していますね。処理を始める前にアニメーション画像を出して、処理が終わる際にローディングの画像を消す処理をしています。そして、while文の中を勝手に重い処理としてここでは使用しています。しかし、このwhile文が流れている間、いや正確にはcallback関数が実行されている間はアニメーションGIFが止まります。
そこで、アニメーションGIFを止めないような方法を考えました。その根本にある考えは。。。重い処理は一つの関数に入れないということです。つまり、一つ関数の中にループで重い処理を実行させるのではなく、再帰を使用して何個も関数を呼び出す必要があります。もちろんそれが再帰処理ができないような重い処理であればこの方法は無理ですが、往々にして重い処理というのはDOMを使ってイテレーションを使用するところになる可能性が高いと思いますので、それを再帰処理に置き換えましょう。そして、修正したコードは以下の通りです。
Event.observe(window, 'load', function() {
var loadingImage = Builder.node('img', {src: 'loading.gif'});
var sync = $('sync');
var async = $('async');
var loading = $('loading');
var working = $('working');
var loop = $('loop');
Event.observe(async, 'click', function() {
var breakNumber = 500;
var callback = function() {
if (breakNumber--) {
working.appendChild(Builder.node('div', {className: 'test'}));
document.getElementsByClassName('test');
setTimeout(callback, 0);
} else {
loading.removeChild(loading.firstChild);
async.disabled = false;
}
loop.innerHTML = 501 - breakNumber;
};
loading.appendChild(Builder.node('div', [loadingImage,"Loading..." ]));
async.disabled = true;
setTimeout(callback,0);
});
});
これで、重いループををしていても、だいたいの場合はアニメーションGIFが止まらずに済みます。「だいたいの場合」と書いたのは理由があります。実は、私の実環境では、もっと重い処理をしなければいけない用件がありましたので、修正版でもアニメーションGIFが動きませんでした。正確にはfirefoxでは大丈夫でした（たぶんそれほど重くなかったのが原因かもしれません。）が、IE6ではアニメーションGIFが止まりました。原因は、再帰の中で呼び出しているsetTimeoutのmillisecondの値でした。私はどうせ次の処理を実行してもらうのだから0でいいのではないか、と考えていたのですが、0だとすぐ関数をエンキューするのはいいのですが、現在走っている処理が終わると、すぐキューにたまった関数をデキューして実行するので、JavaScriptの処理が常に動いていることになったようです。あくまで想像ですが。なので、ここにラグを与える必要があったのです。そこで、setTimeoutに渡すmillisecondの値を適当な数値に変更すると、カクカクするけど、アニメーションGIFが動いてくれました。
動くサンプルは以下に置いておきます。ちなみにこのサンプルはカクカクしません。
Animation GIF and JavaScript setTimeout
404 Blog Not Found:javascript – ページはいつ再描画されるかが激しく参考になりました。
先日、jQuery開発者向けメモを見て、一通り試してみましたがなかなか直感的に書けそうなライブラリなので今後使用することを検討してみます。今、開発の勢いが一番あるライブラリなので追いかけたりするのが楽しそうですね。prototype.jsとscript.aculo.usは、なかなか新たなリリースが無く、ちょっとさみしいですが、これはこれでライブラリとして成熟段階に入ったといことでアリなのでしょうね。
さて、本日はTOEICを受けてきました。過去に２回ほど受けたのですが、相変わらず時間が足らなかったです。問題が中途半端に全問解けそうなので、ついついちゃんと読んでやってしまうのが原因です。そのため最後に15問ほど残ってしまいます。スピード勝負はつらいですね。でもまぁ、おそらくそれなりのスコアは出たでしょう。試験地の愛知大学が思ったよりもとてもキレイでした。
先日激しくヘコむことがありましたが、ようやくすっきりしました。今日から強く生きていこうと思います。
Shin Ohno 2003-2012