非同期通信でページを切り替えを高速化!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を使用して更に高速化する

デモページ