Webアプリで、重い処理をAjaxで非同期化してごまかす

ある画面にＡとＢという、別々に検索しないといけない情報を表示させる必要があるとして、
通常なら画面を表示させる前に下記のように検索処理を実行します。

Ａを検索
　↓
Ｂを検索
　↓
画面に遷移
※Ａの検索とＢの検索は逆も可

検索処理が高速に動作するならいいですが、例えばＢの検索処理が重い処理だったりすると、
Ｂの検索処理が終わるまで画面が表示されず、ユーザーを待たせてしまうことになります。

この場合、画面表示前にＢを検索せずに、画面が表示してからAjaxでＢの検索処理を実行して
ごまかすという手もあるかと思います。

Ajax処理

$(function(){
	$.ajax({
		url : 'searchB',
		type : 'get',
		cache : false,
		success : function(data)
		{
			$('#bData').html(data);
		},
		error : function(xhr,status,thrown)
		{
			$('#bData').html('情報を取得できませんでした');
		}
	});
});

結果を表示するエリア

<div id="bData">
	<img src="loading.gif"/>
</div>

こうすると画面表示時はローディング画像が表示され、同時にAjaxで検索処理実行、
処理が終了したらローディング画像が置き換わって結果が表示されるようになります。

ローディング画像はこういったものを使えばすぐに作成できます。
Load Info - gif generator

検索処理が遅いのであればチューニングをするべきなのですが、チューニングはそれなりに時間と技術力が必要なので、
許されるのであればこういったごまかしも有効かなと思います。

ちなみにFireFoxやChrome、SafariでAjaxの結果が返ってくる前に別のページに遷移すると、
errorコールバック関数が実行されるようです。
なので上記の例だとページが変わる前の一瞬「情報を取得できませんでした」と表示されます。
IEだとerrorは実行されませんでした。

別に目新しいテクニックではないですが、社内向け業務システムとかでも積極的に活用するべきではないかなと考えています。
画面が表示されるまで５秒以上かかったりするシステムも見かけるので・・・