MENU

Journal

全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等でブラウザバックした際に起こる問題の対処方法を説明します。

続く

Journal

CLOSE