いつもお世話になっております。
jquerymobileのページ遷移のような遷移を行いたいのですが、
イメージ(スライドはしなくても可)
URL:http://billboardtop100.net/jquery_mobile/slide/s …
流れとしては、ページローディングしている最中、画面がオーバーレイしながら、
ローディングのアニメーション画像を表示し、
ロードが完了したら、スライドして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');
}
});
});
カッコいいページ遷移がしたいです。。
是非ご教授下さい。
どうぞよろしくお願いします
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
結論を言えば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のソースを見る方が分かりやすいです。
質問で書かれたソースだとローディング表示がローディング中に行われず、
その意味を成していないという問題がありますので、ローディングを常に表示しておいて、
ページの読み込みが終わった時にそれを消す方がまだマシじゃないかなと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・ちょっと先の未来クイズ第4問
- ・【大喜利】【投稿~10/21(月)】買ったばかりの自転車を分解してひと言
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jquerymobileのページ遷移のよ...
-
複数の自動スライドショー(jQue...
-
★大至急!JavaScriptのif文教え...
-
JavaScriptでtabindexの変更っ...
-
jQueryで、複数条件の絞り込み機能
-
Javascriptを使ってQRコード読...
-
変数にドットをいれることはか...
-
location.replaceでの移動
-
readyStateが4にならない原因
-
アコーディオンで多階層のメニ...
-
JSONをperlで受け取る方法
-
二つのbxsliderをレスポンシブ...
-
インラインフレームを自動更新...
-
リンク元のファイル名を表示し...
-
リンク付きの画像をクリックす...
-
Doctrineのjoinについて
-
jQueryを使いformでsubmitした...
-
webサービス上のkmlをgooglemap...
-
AjaxでJSONを受信すると、文字...
-
JavascriptからPHPへのAjax通信...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
選択範囲のリンク URL の抽出
-
bxsliderで巻き戻しにする方法
-
意味を教えてください。
-
if文でelseが実行されない
-
jQueryでメニューの開閉スライド
-
複数の自動スライドショー(jQue...
-
階層別の組織図の自動作成について
-
JavaScriptでtabindexの変更っ...
-
Javascriptを使ってQRコード読...
-
readyStateが4にならない原因
-
SQLのmaxで求めた値を変数に代...
-
インラインフレームを自動更新...
-
AjaxでJSONを受信すると、文字...
-
変数にドットをいれることはか...
-
パソコンで動くjavascriptがス...
-
JavascriptからPHPへのAjax通信...
-
jQueryでloadした部分に.jsが効...
-
連番タイトル名を基準にリンク...
-
jQueryのblockUIをformのボタン...
-
Selenium Basicの件
おすすめ情報