ajaxっぽいスムーズな画面遷移の方法(2/3)

Tips

全3回でご紹介予定の、「ajaxっぽい画面遷移」
第1回ではこの処理のメリットと大雑把な仕組みをご紹介しましたが、
今回は実践編(前半)となります。
「ajaxっぽい画面遷移」の処理の前半部分

  1. 通常のリンクの挙動をストップ
  2. ローディング画面を表示
  3. location.href で ページ遷移

についてご説明します。

1. 通常のリンクの挙動をストップ

まずはローディング画面を表示するまでの
時間を確保する必要があるので、
通常、リンクをクリックした時のように
すぐに画面遷移をしてしまっては困ります。
そこで、preventDefault()というjsのメソッドを用いて、
リンクを押した時のページ遷移が行われないようにしてしまいます。
※jQueryの使用を前提に書いていきます。

$(function(){
var links = $('a.movepage');
links.on('click',function(event){
// クリック時に発生するイベントをキャンセル
event.preventDefault();
// その後の処理〜
});
});

上記では、サイト外へのリンクやページ内スクロールのリンクは
通常通り処理されるように、「movepage」というクラスのついた
アンカータグに対して処理を行なうように書いています。

2. ローディング画面を表示

リンクのクリックイベントをキャンセルしたら
次はローディング画面を表示しましょう。
スムーズに移動したように見せるためには、
ローディング画面は次表示するページの初期状態と
全く同じ状態になる必要があるため、
次の事に注意して作成します。

  • 必要なCSSはhead内で読み込む/書く
  • ローディングの要素はbodyの開始タグの直後くらいに
  • ローディングの画面には初期状態では画像を使用しない
  • jsが読み込まれる前から表示できるように書く

ブラウザでは大雑把に言って
htmlの上に書いてある方から順番に
レンダリングをしていくため、
ローディングの要素(div等)やcssを下の方に書いてしまうと
次の画面で一瞬別の要素が表示されることがあるので、
ローディングに関連するものは極力htmlの上の方に書きます。
また、画像については非同期で読み込まれる要素なので、
読み込まれるまでの数瞬チカついて見えるため
遷移前のローディングとローディング画面の初期状態には
使用しないのが吉です。
※読み込み後フェードインさせるなどはOK
また、jsは対象のDOMが構築された後でないと働かないので、
jsでローディングの動きをさせる場合も、
cssとhtmlのみで最初の画面が表示されるように書いてください。

#loading {
background-color: #f0f0f0;
position: fixed;
top: 0%;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
transition: ease .5s;
}
#loading.is-hidden {
opacity: 0;
top: -100%;
}
#loading span {
font-family: sans-serif;
display: block;
text-align: center;
width: 100%;
height: 40px;
color: #ccc;
font-size: 16px;
letter-spacing: 4px;
text-indent: -4px;
position: absolute;
top: calc( 50% - 10px );
left: 0;
}
<body>
<div id="loading"><span>LOADING</span></div>
<div id="wrap">
<!-- コンテンツ -->
</div>
</body>
$(function(){
var loading = $('#loading');
var links = $('a.movepage');
// ローディング画面を隠す
loading.addClass('is-hidden');
links.on('click',function(event){
// クリック時に発生するイベントをキャンセル
event.preventDefault();
// ローディング画面を表示
loading.removeClass('is-hidden');
// その後の処理
});
});

3. location.href で ページ遷移

ここまで来たら後はページを移動させるだけです。
今回はcssのトランジションでローディング画面を上からスライドさせて
表示しているので、そのトランジションに設定した秒数後に
location.hrefを使ってページ遷移を実行します。

$(function(){
var loading = $('#loading');
var links = $('a.movepage');
// ローディング画面を隠す
loading.addClass('is-hidden');
links.on('click',function(event){
// クリック時に発生するイベントをキャンセル
event.preventDefault();
// ローディング画面を表示
loading.removeClass('is-hidden');
// 移動先のURLを取得して指定秒数後にページ遷移する
var href = $(this).attr('href'), // クリックしたリンクから遷移先URLを取得
wait = 500; // 待ち時間をミリ秒で指定
setTimeout(function(){
// ページ遷移の処理
location.href = href ;
}, wait);
});
});

ここまでで遷移までの処理は完了です。
次回は、ページ遷移後に画像を読み込んだ後にローディング画面を隠す処理と、
safari等でブラウザバックした際に起こる問題の対処方法を説明します。
→ ajaxっぽいスムーズな画面遷移の方法 実践編(後半)

お問い合わせ

    個人情報利用目的への同意

    ※このサイトはreCAPTCHAとGoogleによって保護されています。プライバシーポリシー利用規約が適用されます。
    ※お客様が入力した個人情報はSSL暗号化信号によって保護されています。

    個人情報の利用目的
    このお問い合わせフォームでご提供いただく個人情報は、お問合せ等に対する回答や資料送付、その他ご連絡のために利用します。
    当個人情報を第三者に提供することはありません。
    当個人情報の取扱いを委託することはありません。
    必要事項を全てご入力下さい。入力内容に不備がある場合は、ご返信しかねる場合がございます。
    内容により、お時間をいただく場合がございます。
    当個人情報の利用目的の通知、開示、内容の訂正・追加または削除、利用の停止・消去および第三者への提供の停止(「開示等」といいます。)を受け付けております。
    開示等の求めは、info@commono.co.jpで受け付けます。
    統計ツールやクッキー、ウェブビーコン等を用いてご利用状況を調査していますが、これによる個人情報の取得、利用は行っておりません。
    当社の個人情報保護に対する取り組みは「Privacy Policy」を必ずご確認ください。

    COMMONO株式会社
    E-mail:info@commono.co.jp
    個人情報保護方針、個人情報の取扱いについて
    PRIVACY POLICY

    現在準備中です

    お気に入り

    お気に入りから削除

    選択したアイテムをお気に入りから削除しますか?