Journal ジャーナル

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

通常のリンクの挙動をストップ
ローディング画面を表示
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;
}

&lt;body&gt;
&lt;div id="loading"&gt;&lt;span&gt;LOADING&lt;/span&gt;&lt;/div&gt;
&lt;div id="wrap"&gt;
&lt;!-- コンテンツ --&gt;
&lt;/div&gt;
&lt;/body&gt;

$(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っぽいスムーズな画面遷移の方法実践編（後半）

Written by

Shinji Yamamoto

Relative Post 関連記事

Latest Journal 最新記事

#Tips

ajaxっぽいスムーズな画面遷移の方法（3/3）

Shinji Yamamoto

2017.12.28

#Tips