非同期通信でページを切り替えを高速化！PJAXの使い方

PJAXはAjaxとpushStateを組み合わせて非同期通信でページの切り替えを行うjQueryプラグインです。
指定したエリアのみ通信が発生するので、スムーズなページ遷移が可能です。
対応ブラウザはIE10+、その他モダンブラウザです。

デモページ

特徴と機能は公式サイトによると以下の通りです。

特徴

• プリロードによる高速化
• データバインディングによるサーバー負荷軽減
• クライアントサイドロードバランサによるネットワーク負荷分散
• CSS・SCRIPT・RSSなどHEAD要素の同期
• URL・TITLEなど項目別の更新無効化
• pjaxの一般的諸問題の解決

機能

• Ajax処理の継承
• RSS・viewport等の同期
• CSSの同期
• JavaScriptの読み込み
• 複数範囲の更新
• 更新範囲の候補設定
• pjaxを使用するURL範囲の設定
引用元：http://falsandtru.github.io/jquery-pjax/introduction/

必要なファイルを読み込む

PJAXの配布元サイトからプラグインをダウンロードして、jQueryと一緒に読み込みます。

PJAX配布サイト

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.pjax.min.js"></script>

html、CSSを記述する

今回は表示を切り替えたいエリアを#mainで囲っています。

1ページ目のhtml

<article>
<header>
    <h1>jQuery-非同期通信でページを切り替えるPJAXの使い方</h1>
</header>
<div id="main">
    <section>
  <h2>Page1</h2>
  <p class="button"><a href="pjax2.html">Next</a></p>
 </section>
</div>
<footer><p class="back"><a href="/">&#171; back to top</a></p></footer>
</article>

2ページ目のhtml

#mainエリアに表示させたい内容を記述します。
1ページ目でNextボタンを押下した後に読み込まれるのは#mainで囲った部分のみなので、その部分のhtmlのみでもOKなのですが、2ページ目をブックマークなどから直接表示した場合、#main以外の部分が表示されなくなってしまうので、今回は差分以外も記述しています。

<article>
<header>
<h1>jQuery-非同期通信でページを切り替えるPJAXの使い方</h1>
</header>
<div id="main">
    <section>
  <h2>Page2</h2>
  <p class="button"><a href="pjax.html">Back</a></p>
 </section>
</div>
<footer><p class="back"><a href="/">&#171; back to top</a></p></footer>
</article>

表示する時のCSSアニメーション

#mainが表示された時にフェードインするアニメーションをCSSで指定しています。

#main { 
    -webkit-animation-duration: 1s; 
    animation-duration: 1s; 
 -webkit-animation-fill-mode: both; 
 animation-fill-mode: both; 
} 
@-webkit-keyframes fadeInUp { 
 0% { 
  opacity: 0; 
  -webkit-transform: translateY(20px); 
 } 
 100% { 
  opacity: 1; 
  -webkit-transform: translateY(0); 
 } 
} 
@keyframes fadeInUp { 
 0% { 
  opacity: 0; 
  transform: translateY(20px); 
 } 
 100% { 
  opacity: 1; 
  transform: translateY(0); 
 } 
} 
.fadeInUp { 
 -webkit-animation-name: fadeInUp; 
 animation-name: fadeInUp; 
}

PJAX用の設定をする

4行目で切り替えエリアとして#mainを指定しています。
次に、更新範囲の描画後にアニメーション用のclassを追加するように指定しています。

$(function() {
    $.pjax({
        area: '#main'
    });
    //表示アニメーションのクラスを追加
    $(document).bind('pjax:render', function() {
        $('#main').attr({
            'class': 'fadeInUp'
        });
    });
});

APIの詳細は配布サイトへ

特定のリンク先のみPJAXを使いたい場合

以下のように指定すると、aタグにpjaxというクラス名がついていた場合のみ、リンク先にPJAXを使用して切り替わります。

詳細は配布サイトへ

$.pjax({
  link: 'a.pjax'
});

更に高速化する

preloadを使用して更に高速化する

デモページ