13投稿 → Barba.jsを使った実装方法を書きました

pjaxをざっと触ってみたので、自分用にメモ。
少々癖はあるが、シームレスなページ遷移の実装や、読み込み速度の向上が可能。
まだまだ使いこなせてないので、マスターしたい（切実）

★pjaxについてはこちら → http://falsandtru.github.io/jquery-pjax/

準備

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.pjax/1.9.6/jquery.pjax.js"></script>

htmlの<head>部分に記述。基本的にpjax.jsは一度読み込めば動作し続けるので、なんども読み込み直す必要はない。

JavaScript

$(function(){
    $.pjax({
        area : '#content',
        link : 'a:not([target])'
    });
});

areaに書き換えるエリアの範囲を指定、linkにpjaxを適用させるリンクを設定。
基本的にはこれだけで動作可能。

上記の場合、「target="blank"以外のaタグをクリックしたら、pjaxでリンク先の#content内の要素を読み込み、書き換える」という動作になる。

よく使うオプション

$(function(){
    $.pjax({
        area : '#content',
        link : 'a:not([target])'
        ajax : { timeout: 2500 }, //Ajaxの設定を記述可能
        wait : 500 //リンクをクリックしてからの待機時間
        load : { script: true } //遷移先のインラインスクリプトを読み込む
    });
});

ajaxでは、Ajaxの設定を記述できる。タイムアウト時間の設定、エラー時の処理など。
waitは、リンクをクリックしてからの遅延時間を設定できる。

例えば、「0.5秒のCSSアニメーションを実行後に遷移させたい場合」などに有効。

loadに関しては次の項目で詳しく。

load:scriptに関して

areaの範囲内にある、インラインスクリプトを読み込むか読み込まないかの設定。初期値はfalse。

これをtrueにしておくと、ページ遷移した際に個別のページで設定されているJavaScriptを実行することが出来る。(ただしインラインスクリプトに限る)

ちなみにJavaScriptを外部ファイル化すると、pjaxは一度しか読み込み・実行しないもよう。ページ書き換えの度に繰り返し実行したい場合は、必ずインラインで<body>内に記述しよう。

各種イベントについて

pjaxには、ページの更新処理の時に呼び出されるイベントが用意してあるので、ここで遷移アニメーションなどを設定することが可能。

【pjaxによるページ遷移が行われる前に発生】

$(document).bind('pjax:fetch', function() {
  // ここに処理を記述
});

【pjaxによるページ遷移が行われた後に発生】

$(document).bind('pjax:render', function() {
  // ここに処理を記述
});

基本的には上記2つでページ遷移の前、後の処理を設定することが出来る。
addClassなどでクラスを追加してCSS Transitionでアニメーションさせるといい感じになるぞ。

★その他のイベント → http://falsandtru.github.io/jquery-pjax/api/event/

動かないとき

勉強中に遭遇したのは、load: { script: true }を設定していた時に、pjaxが動作せず普通にページ遷移してしまうという現象。

これは、<body>内に余計なスクリプトを含んでいると起こってしまうみたい。

一回しか読み込まないものは<head>へ外部ファイルに、繰り返し読み込むものはarea範囲内の<body>内にインラインで記述するようにする。

参考

基本的に公式ドキュメント(日本語)が詳しいので要チェック。

高速かつスムーズなページ遷移を実現する pjax 覚書