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

2017.11.24

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

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

Relative Post

Latest Journal

philosophy | 哲学

philosophy | 哲学

commono
2016.12.19
Vision | 展望

Vision | 展望

commono
2016.12.09
webデザインフロー(1)インサイド→アウト ー理論編ー

webデザインフロー(1)インサイド→アウト ー理論編ー

Shun Uchimura
2017.05.13
オウンドメディア(3)少ないリソースで引力のあるメディア展開をする方法

オウンドメディア(3)少ないリソースで引力のあるメディア展開をする方法

Shun Uchimura
2017.05.13
オウンドメディア(2)押さずに、引き込む。

オウンドメディア(2)押さずに、引き込む。

Shun Uchimura
2017.05.13
オウンドメディア(1)受け手主観でオウンドメディアをつくる

オウンドメディア(1)受け手主観でオウンドメディアをつくる

Shun Uchimura
2017.05.13
デザイナーとしてマーケティングを考える(4)4Pのキモを知る

デザイナーとしてマーケティングを考える(4)4Pのキモを知る

Shun Uchimura
2017.05.12
デザイナーとしてマーケティングを考える(3)4Pは古いのか

デザイナーとしてマーケティングを考える(3)4Pは古いのか

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

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

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

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

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

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

Shinji Yamamoto
2017.11.22
スムーススクロールがうまく動かない場合の解決方法

スムーススクロールがうまく動かない場合の解決方法

Shinji Yamamoto
2017.11.22
Javascript APIでのストリートビュー実装方法

Javascript APIでのストリートビュー実装方法

Shinji Yamamoto
2017.11.15
指定の範囲までついてくるフローティングバナー

指定の範囲までついてくるフローティングバナー

Shinji Yamamoto
2017.07.13

View ALL

Contact