jquerymobileのページ遷移のような遷移

質問

いつもお世話になっております。

jquerymobileのページ遷移のような遷移を行いたいのですが、
イメージ（スライドはしなくても可）
URL：http://billboardtop100.net/jquery_mobile/slide/slide.html

流れとしては、ページローディングしている最中、画面がオーバーレイしながら、
ローディングのアニメーション画像を表示し、
ロードが完了したら、スライドしてURL先へリンクする

というイメージなのですが（スライドはしなくても可）

ajaxとかそういう技術を使わないと、スムーズに遷移しないのでしょうか、、

以下に作ってみたサンプルを記載しますが、
単純にオーバーレイしてからリンク先へアクセスしているので、
読み込みも遅くなりますし、以下のコードだと、ロードの画像が真ん中にきません、、
そして画像を隠す動作が一瞬ちらついてしまいます、、、

html
<div id="shade"><img src="/img/ajax-loader.gif" alt="ローディング中"></div>
<section data-role="content">
<ul data-role="listview">
<li><a href="/aboutus.html" data-transition="slide">hoge</a></li>
<li><a href="sample.html" data-transition="slide">hoge2</a></li>
<li><a href="sample.html" data-transition="slide">hoge3</a></li>
</ul>
</section>

js
jQuery(function(jQuery){
jQuery("#shade").css({
opacity: '0.6',
display: 'none',
position: 'absolute',
top: '0',
width: '100%',
height: '100%',
background: '#000',
zIndex: '1'
});

jQuery("a[href]").click(function(e){
link = jQuery(this).attr("href");
if (!link.match(/#/i)) {
e.preventDefault();
jQuery("#shade").css('display', 'block');
}
});
});

カッコいいページ遷移がしたいです。。

是非ご教授下さい。
どうぞよろしくお願いします

回答No.1

tenderfeel

結論を言えばYesです。

jQueryMobile などのシームレスな画面遷移の仕組みをざっと箇条書きにすると次のようになっています。

1. ユーザーがリンクをクリックする

2. クリックイベントが発動　リンク先などのチェックをする
$('a').click()

3. ページローディングを開始
　$.ajax 、$.getなど

4. ローディング表示
　$.ajaxのbeforeSendなど

5. 読み込んだコンテンツをページ表示用要素にappend
　$.ajaxのsuccessなど

6. 5で作った要素をbodyにappend

7. ローディング消す

8. ページ遷移アニメーション開始
元のページ要素を左へ移動→非表示にする
　 新しいページ要素を右から移動→中央へ

普通のリンクのようにページ移動しているわけではなく、
ページの中身を読み込んで表示しているページに追加して移動してるっぽく見せています。
あと、jQueryMobileなどではCSS3アニメーションを主に使っています。
この仕組みはjQTouchのソースを見る方が分かりやすいです。

質問で書かれたソースだとローディング表示がローディング中に行われず、
その意味を成していないという問題がありますので、ローディングを常に表示しておいて、
ページの読み込みが終わった時にそれを消す方がまだマシじゃないかなと思います。